/* Monochrome. Light by default, dark when the system prefers it or the visitor toggles it (data-theme on ). */ :root { --bg: #ffffff; --text: #000000; --muted: #666666; --rule: #bbbbbb; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --text: #ffffff; --muted: #999999; --rule: #444444; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #000000; --text: #ffffff; --muted: #999999; --rule: #444444; color-scheme: dark; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; padding: 24px 16px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 14px; line-height: 1.25; color: var(--text); background: var(--bg); display: flex; justify-content: center; } main { width: 100%; max-width: 640px; } pre { margin: 0; font: inherit; white-space: pre; overflow-x: auto; } header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; } .ball { --rows: 35; font-size: clamp(6px, 2.55vw, 14px); line-height: 1; height: calc(var(--rows) * 1em); margin: 0 auto 32px; width: max-content; overflow: hidden; /* Fill the hairline seams between adjacent block glyphs. */ text-shadow: 0.6px 0 0 currentColor; } .ball .answer { font-weight: 700; } form { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--rule); border-bottom: 1px dashed var(--rule); padding: 8px 0; } .prompt { font-weight: 700; } input { flex: 1; min-width: 0; padding: 6px 0; border: none; background: transparent; color: var(--text); font: inherit; outline: none; caret-color: var(--text); } input::placeholder { color: var(--muted); } button { padding: 4px 0; border: none; background: transparent; color: var(--text); font: inherit; cursor: pointer; } button:hover { text-decoration: underline; } button:disabled { color: var(--muted); cursor: wait; text-decoration: none; } .status { margin-top: 12px; color: var(--muted); } .status:empty { display: none; } .odds { margin-top: 20px; color: var(--muted); } .odds .picked { color: var(--text); font-weight: 700; } .odds .head { color: var(--text); } .odds .bar { color: var(--text); } @media (max-width: 480px) { body { font-size: 11px; } /* 16px stops iOS from zooming the page when the input is focused. */ input { font-size: 16px; } }