:root{
  --sky-deep:#3f7cf5; --sky:#6fb6ff; --sky-light:#e2f5ff; --sky-mid:#bfe8ff;
  --teal:#0d5f55; --teal-2:#137a6b; --teal-dark:#083c36; --lime:#43d35b; --lime-2:#b7ea4a;
  --coin:#ffd23f; --pink:#ff5fa8; --plum:#7a1f4a; --ink:#123b3a; --red:#e8403a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sky-light);color:var(--ink);font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}

/* Pause/play toggle (see js/pixel.js) and the global "motion off" state */
.motion-toggle{position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--teal);border:0;cursor:pointer;
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 6px 0 0 var(--teal-dark)}
.motion-toggle canvas{width:24px;height:24px}
.motion-toggle:hover{background:var(--teal-2)}
.motion-toggle:active{transform:translateY(2px)}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition:none!important}

/* The whiteboard marker (pixel.js markerWriter). A line still being written holds its wobble. */
canvas.marker{position:absolute;left:0;top:0;z-index:6;width:42px;height:auto;pointer-events:none;filter:drop-shadow(2px 2px 0 rgba(44,49,64,.25))}
.inking{animation:none!important}

/* The phone app (js/app-mode.js): a page can hold a block for the website and a block for the app. Wrappers and spans only. */
.app-only{display:none}
.in-app .app-only{display:block}
.in-app span.app-only{display:inline}
.in-app .web-only{display:none!important}
.in-frame{scrollbar-width:none}.in-frame::-webkit-scrollbar{display:none}