@font-face { font-family: "DM Sans Variable"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("/fonts/dm-sans-latin-wght-5.3.0.woff2") format("woff2"); }
/* The chrome every web page shares: the header, the skip link and the one footer. Loaded by the app and by every
 * server-rendered page, which have no bundle, so each hex is typed by hand; every one is a brand token's value
 * (packages/ui-tokens; apps/web/test/siteChromeTokens.spec.ts holds them to it). Color roles (docs/BRAND.md,
 * November 10): pistachio frames navigation; Play now is cocoa, the back of a tile, never cherry; the current link is
 * butter with an ink edge; the header carries no cherry at all. */
:root { --site-header-height: 64px; }
html { scroll-padding-top: calc(var(--site-header-height) + 12px); }
html body #root { height: auto; min-height: 100%; }
.site-header.brand-nav { position: sticky; top: 0; z-index: 40; display: block; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; border: 0; border-bottom: 1px solid #b7a58a; background: #e4eeb0; color: #3b2418; font: 500 16px/1.3 "DM Sans Variable", "DM Sans", sans-serif; isolation: isolate; }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header .site-header-inner { position: relative; display: flex; align-items: center; gap: 20px; width: min(100%, 1248px); min-height: 63px; margin: 0 auto; padding: 8px 24px; }
.site-header a { color: inherit; text-decoration: none; }
/* Beside a page with a tray (the page system's side family on a tall window), the header and the footer take the page's own
   edges: the gutter the approved design draws, clamp(1.5, 3.4% of the window, 4.5) of the size it draws a wide page at
   (clamp(1rem, min(1.4vw, 2.3vh), 1.9rem); packages/client/src/page/frame.ts states the same numbers). Type does not grow. */
@media (min-width: 801px) {
  html:has(main.pg[data-family="side"][data-tall]) :is(.site-header .site-header-inner, .site-footer .site-footer-inner) { width: min(100%, calc(96 * clamp(1rem, min(1.4vw, 2.3vh), 1.9rem))); padding-inline: clamp(calc(1.5 * clamp(1rem, min(1.4vw, 2.3vh), 1.9rem)), 3.4vw, calc(4.5 * clamp(1rem, min(1.4vw, 2.3vh), 1.9rem))); }
}
@media (min-width: 1800px) and (min-height: 1000px) {
  html:has(main.pg[data-family="side"][data-tall]) :is(.site-header .site-header-inner, .site-footer .site-footer-inner) { width: min(100%, calc(77 * clamp(1rem, min(1.4vw, 2.3vh), 1.9rem))); }
}
.site-header .brand-home { flex: 0 0 auto; padding: 0; min-height: 44px; display: flex; align-items: center; }
.site-header .brand-wordmark { display: block; width: 140px; }
.site-header .brand-wordmark img { display: block; width: 100%; height: auto; }
/* The four places. Each is a 44px pill; the one you are in is butter with a 2px ink edge, never an underline alone. */
.site-header .site-header-links { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin: 0 0 0 auto; padding: 0; font-size: 16px; }
.site-header .site-header-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; line-height: 1; white-space: nowrap; }
.site-header .site-header-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-header .site-header-links a[aria-current="page"] { background: #f4d97b; color: #3b2418; box-shadow: inset 0 0 0 2px #3b2418; text-decoration: none; }
/* Play now: cocoa with a cream label and the tile back's inner butter line, on every page. */
.site-header .site-play { --site-play-ground: #4c2313; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px 0 15px; border-radius: 999px; background: var(--site-play-ground); color: #fdf7e5; box-shadow: inset 0 0 0 3px var(--site-play-ground), inset 0 0 0 4px color-mix(in srgb, #f4d97b 55%, transparent); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; }
.site-header .site-play:hover { --site-play-ground: #3b2418; }
.site-header .site-play-tile { flex: none; width: 11px; height: 16px; border-radius: 2.5px; box-shadow: inset 0 0 0 1.5px #f4d97b; }
.site-header .account-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; font-weight: 600; line-height: 1; }
.site-header .account-link[aria-current="page"] { border: 2px solid #3b2418; background: #f4d97b; color: #3b2418; outline: 0; }
.site-header .account-symbol { display: block; width: 23px; height: 23px; background: currentColor; mask: url('/brand/account.svg') center / contain no-repeat; }
.site-header a:focus-visible, .site-header .account-link:focus-visible { outline: 3px solid #3b2418; outline-offset: 3px; }
/* The first thing Tab reaches on every page: out of sight until it has focus, then a pill at the top left. */
.site-skip { position: absolute; left: 12px; top: 8px; z-index: 41; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #3b2418; color: #fdf7e5; font: 600 16px/1 "DM Sans Variable", "DM Sans", sans-serif; text-decoration: none; white-space: nowrap; transform: translateY(-250%); }
.site-header a.site-skip { color: #fdf7e5; }
.site-skip:focus { transform: none; }
/* The release notice on server-written pages, right under the header: the app banner's butter strip, its words and, while new hands are paused, the free lesson. */
.site-service-notice { padding: 10px 16px; background: #f4d97b; color: #3b2418; font: 500 14px/1.45 "DM Sans Variable", "DM Sans", sans-serif; text-align: center; overflow-wrap: anywhere; }
.site-service-notice p { max-width: 1248px; margin: 0 auto; }
.site-service-notice a { padding-block: 12px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.site-service-notice a:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* The one footer (K15): six links and the tagline, on the reading canvas under a hairline, the same on every page.
 * Its type is the reader's own text size, so it wraps instead of scrolling sideways at 200%. */
.site-footer { position: sticky; top: 100vh; clear: both; border-top: 1px solid #e3d6ba; background: #fdf7e5; color: #695044; font: 400 1rem/1.3 "DM Sans Variable", "DM Sans", sans-serif; }
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.site-footer .site-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; width: min(100%, 1248px); margin: 0 auto; padding: 4px 24px 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; min-width: 0; margin: 0 0 0 -10px; padding: 0; }
.site-footer a { display: inline-flex; align-items: center; min-width: 44px; min-height: max(44px, 3rem); padding: 0 10px; border-radius: 999px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.site-footer a:hover { color: #3b2418; text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible { outline: 3px solid #3b2418; outline-offset: -3px; }
.site-footer .site-footer-tagline { min-width: 0; margin: 0; padding: 8px 0; color: inherit; font: 700 1rem/1.2 "Playfair Display", Georgia, "Times New Roman", serif; }
/* Sticky at 100vh: under a short page the footer rests at the foot of the window; under a long one it ends the page. It never covers the page.
 * While the first page is still downloading, the loader is the page, and the footer waits for the page it ends. */
.brand-loader ~ .site-footer { display: none; }
/* The game has the whole screen at a live table, in a running Advanced hand, in a running drill and in a replay as it plays
 * (each is exactly one screen tall under the header): no footer under it. A replay's notices (loading, sign in, gone) keep it. */
:root[data-at-table] .site-footer, body:has([data-advanced-playing], [data-drill-running], [data-replay-page]) .site-footer { display: none; }
@media (max-width: 800px) {
  :root { --site-header-height: 109px; }
  .site-header .site-header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto 44px; gap: 4px 12px; padding: 8px 16px; }
  .site-header .brand-wordmark { width: 112px; }
  .site-header .site-play { padding-inline: 12px 15px; }
  .site-header .site-header-links { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; width: 100%; gap: 0; }
  .site-header .site-header-links a { padding-inline: 8px; }
  .site-header.brand-nav .account-link { grid-column: 3; grid-row: 1; }
  .site-footer .site-footer-inner { padding-inline: 16px; }
}
/* The narrowest phones: the four links keep one row at 15px with tighter pills, so 320px still fits. */
@media (max-width: 360px) {
  .site-header .site-header-inner { column-gap: 8px; padding-inline: 12px; }
  .site-header .brand-wordmark { width: 104px; }
  .site-header .site-play { gap: 6px; padding-inline: 10px 12px; }
  .site-header .site-header-links { font-size: 15px; }
  .site-header .site-header-links a { padding-inline: 6px; }
}
/* By night the header sits on the surface color with its own line; Play stays cocoa and takes a 2px butter edge. */
@media (prefers-color-scheme: dark) {
  .site-header.brand-nav { background: #2d2825; color: #fdf7e5; border-color: #5a5048; }
  .site-header .site-play, .site-header .site-play:hover { box-shadow: inset 0 0 0 2px #f4d97b; }
  .site-header a:focus-visible, .site-header .account-link:focus-visible { outline-color: #f4d97b; }
  .site-skip, .site-header a.site-skip { background: #fdf7e5; color: #211e1c; }
  .site-footer { border-color: #5a5048; background: #211e1c; color: #d4c9bb; }
  .site-footer a:hover { color: #fdf7e5; }
  .site-footer a:focus-visible { outline-color: #f4d97b; }
}
/* Where colors are forced, the current link keeps a mark of its own. */
@media (forced-colors: active) {
  .site-header .site-header-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
  .site-header .site-play-tile { display: none; }
}
@media print { .site-header.brand-nav, .site-service-notice, .site-skip, .site-footer { display: none !important; } }

.marketing-choice { max-width: 55rem; margin: 0 auto; padding: 0 24px 12px; font: inherit; }
.marketing-choice summary { cursor: pointer; width: fit-content; min-height: 44px; padding-block: 12px; }
.marketing-choice button { min-height: 44px; padding: 0 1em; border: 1px solid currentColor; border-radius: .4rem; color: inherit; background: inherit; font: inherit; cursor: pointer; }
.marketing-choice a { color: inherit; margin-inline-start: .5em; }
@media print { .marketing-choice { display: none; } }