/* Every colour is a token, so dark mode is one block of overrides. The OS preference decides on first load; the D key (or the phone's Dark mode toggle) sets data-theme on and that wins from then on. */ :root { --paper: #f6f4ef; --ink: #15171b; --soft: #555b66; --accent: #2f5bea; --line: #dcd8cf; --chip: #ffffff; --code: #ebe7de; --note-bg: rgba(15, 17, 21, .9); --note-ink: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #101317; --ink: #f1f3f7; --soft: #9aa3b2; --accent: #6e93ff; --line: #2b313c; --chip: #1b2029; --code: #1b2029; --note-bg: rgba(241, 243, 247, .94); --note-ink: #12141a; } } :root[data-theme="dark"] { --paper: #101317; --ink: #f1f3f7; --soft: #9aa3b2; --accent: #6e93ff; --line: #2b313c; --chip: #1b2029; --code: #1b2029; --note-bg: rgba(241, 243, 247, .94); --note-ink: #12141a; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); transition: background-color .25s ease, color .25s ease; } body { font: 400 clamp(16px, 2.9vmin, 34px)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; } .slide { position: fixed; inset: 0; padding: 9vh 9vw; display: none; flex-direction: column; justify-content: center; gap: .4em; --dr-accent: var(--accent); } .slide.is-live { display: flex; animation: enter .35s ease-out; } @keyframes enter { from { opacity: 0; transform: translateY(1.2vh); } } h1 { font-size: 2.9em; line-height: 1.02; margin: 0; letter-spacing: -.02em; } h2 { font-size: 1.75em; line-height: 1.1; margin: 0 0 .35em; letter-spacing: -.01em; max-width: 26em; } h3 { font-size: 1em; margin: 0 0 .3em; color: var(--accent); } p { margin: .25em 0; max-width: 34em; } .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .55em; font-weight: 700; color: var(--accent); } .lede { font-size: 1.15em; color: var(--soft); max-width: 26em; } .note { color: var(--soft); font-size: .8em; } .keys { list-style: none; padding: 0; margin: 1.2em 0 0; display: grid; gap: .35em; font-size: .75em; color: var(--soft); } kbd { font: 600 .8em ui-monospace, SFMono-Regular, Menlo, monospace; padding: .08em .45em; border-radius: .3em; border: 1px solid var(--line); border-bottom-width: 3px; background: var(--chip); color: var(--ink); } code { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--code); padding: .05em .3em; border-radius: .25em; } .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4vw; margin-top: .6em; } .cols > div { border-top: 3px solid var(--ink); padding-top: .6em; font-size: .85em; } .poll h2 { max-width: 30em; } .poll [data-ix-results] { font-size: .95em; max-width: 44em; } .count { position: fixed; right: 2.2vw; bottom: 2vh; font: 600 .5em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soft); letter-spacing: .05em; } /* The giant X: above ALL content, including deck-remote's own overlays. */ #bigx { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; display: none; } #bigx.on { display: block; animation: pop .18s ease-out; } #bigx svg { width: 100%; height: 100%; } #bigx path { stroke: #e11d48; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; stroke-width: 7vmin; opacity: .92; } @keyframes pop { from { transform: scale(1.06); opacity: 0; } } @media (max-width: 700px) { .cols { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .slide.is-live, #bigx.on { animation: none; } html, body { transition: none; } } /* Controls driven from the phone (choice / number / text / momentary). */ .demo-note { position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%); max-width: 80vw; padding: 12px 20px; border-radius: 14px; background: var(--note-bg); color: var(--note-ink); font-size: clamp(16px, 2.4vmin, 24px); z-index: 60; } .demo-note[hidden] { display: none; } /* The wash contrasts with the page: white on a dark deck, black on a light one. A white wash on this cream paper was invisible, which read as "does nothing". */ body.flash { box-shadow: inset 0 0 0 100vmax var(--wash, rgba(0, 0, 0, .4)); }