html, body { margin: 0; padding: 0; font: 12px/1.5 Verdana, sans-serif; background: #1a74ba; }
#wrapper { max-width: 664px; margin: 0 auto; }
#td-wrapper { padding: 8px 10px 12px; background: #e0f4fc; }
h1 { margin: 0; font-size: 18px; }
.instructions { margin: 6px 0; }
#td-loading { padding: 40px 0; font-size: 18px; }
#td-board { display: none; }
#td-canvas { display: block; width: 100% !important; height: auto !important; background: white; touch-action: none; }
#about { padding: 10px; color: white; }
#about a { color: white; }
html.embedded, html.embedded body { height: 100%; overflow: hidden; }
.embedded #wrapper { max-width: none; height: 100dvh; box-sizing: border-box; padding-top: 64px; display: flex; align-items: center; justify-content: center; }
.embedded #td-wrapper { padding: 0; width: min(100vw, calc((100dvh - 64px) * 8 / 7), 640px); }
.embedded h1, .embedded .instructions, .embedded #about { display: none; }