.crayon-sheet{pointer-events:none;z-index:30;width:100%;height:100%;position:fixed;inset:0}html.is-pressing,html.is-pressing *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}html.is-crayoning{cursor:crosshair}.crayon-box{left:max(12px, env(safe-area-inset-left));bottom:max(12px, env(safe-area-inset-bottom));z-index:31;font-family:var(--font-display,inherit);flex-direction:column-reverse;align-items:flex-start;gap:10px;transition:transform .25s;display:flex;position:fixed}.crayon-box.is-quiet{pointer-events:none;transform:translate(calc(-100% - 20px))}@media (width<=700px){.crayon-box{padding:10px 12px max(10px, env(safe-area-inset-bottom));align-items:center;position:static}.crayon-box.is-quiet{pointer-events:auto;transform:none}}.crayon-pick,.crayon-swatch{background:var(--paper,#fbf6ea);min-width:72px;min-height:72px;color:var(--ink,#17213a);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;border:4px solid #ffffffe6;border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 10px;font-size:15px;font-weight:700;line-height:1;display:inline-flex;box-shadow:0 5px #17213a40,0 8px 16px #071b3d40}.crayon-pick:active,.crayon-swatch:active{transform:translateY(3px);box-shadow:0 2px #17213a40,0 4px 10px #071b3d40}.crayon-pick:focus-visible,.crayon-swatch:focus-visible{outline:4px solid var(--crayon-yellow,#ffd93d);outline-offset:2px}.crayon-tip{background:var(--crayon);border-radius:50%/60% 60% 40% 40%;width:30px;height:30px;box-shadow:inset 0 -5px #00000026}.crayon-pick-label{font-size:13px}.crayon-wheel{background:#ffffffeb;border-radius:24px;grid-template-columns:repeat(3,auto);gap:8px;padding:10px;display:grid;box-shadow:0 10px 24px #071b3d4d}.crayon-wheel[hidden]{display:none}.crayon-dot{background:var(--crayon);border-radius:50%;width:28px;height:28px;box-shadow:inset 0 -4px #00000026}.crayon-swatch[aria-pressed=true]{border-color:var(--ink,#17213a)}.crayon-rub .crayon-dot{background:repeating-linear-gradient(45deg,#fff 0 4px,#d9d2c3 4px 8px)}.crayon-name{font-size:12px}@media print{.crayon-sheet,.crayon-box{display:none}}