/* Kaleidoscope Drawing: anything the kit's styles (../kit.css) don't already cover. Paper in the light look, the Library's night in the dark. */
.fidget[data-fidget="kaleidoscope"] { --kd-bg: var(--paper); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fidget[data-fidget="kaleidoscope"] { --kd-bg: var(--term-bg); } }
:root[data-theme="dark"] .fidget[data-fidget="kaleidoscope"] { --kd-bg: var(--term-bg); }

/* a square drawing area, as large as fits */
.fidget[data-fidget="kaleidoscope"] .fidget-stage { background: var(--kd-bg); cursor: crosshair; height: auto; aspect-ratio: 1 / 1; width: min(100%, 76vh, 46rem); margin: 0 auto; }
@supports not (aspect-ratio: 1 / 1) { .fidget[data-fidget="kaleidoscope"] .fidget-stage { height: min(100vw, 76vh, 46rem); } }
.fidget[data-fidget="kaleidoscope"].is-full .fidget-stage { width: 100%; aspect-ratio: auto; flex: 1 1 auto; }
.kd-fade { transition: opacity .3s ease-out; }
.kd-fade.is-gone { opacity: 0; }

/* the keyboard pen: a ring (filled while the pen is down), shown only while the keyboard is drawing */
.kd-pen { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--kd-bg); pointer-events: none; display: none; }
.kd-kbd .kd-pen { display: block; }
.kd-pen.is-down { background: var(--pink); border-color: var(--pink); }

/* the tools row: labelled groups that wrap on narrow screens */
.fidget[data-fidget="kaleidoscope"] .fidget-tools { gap: .5rem 1.2rem; margin: 1rem 0 0; }
.kd-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; max-width: 100%; }
.kd-label { font: 700 .8rem/1.2 var(--mono); text-transform: uppercase; color: var(--muted); margin-right: .1rem; }
.fidget-tools .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.fidget-tools .kd-num { min-width: 44px; justify-content: center; padding-left: .5rem; padding-right: .5rem; }
.kd-sw { width: 44px; height: 44px; padding: 5px; border: 2px solid var(--line); background: var(--paper); cursor: pointer; box-shadow: 2px 2px 0 var(--shadow); }
.kd-chip { display: block; width: 100%; height: 100%; border: 1px solid var(--line); }
.kd-sw[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.kd-sw:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 480px) { .kd-sw { width: 44px; height: 44px; padding: 4px; } .fidget[data-fidget="kaleidoscope"] .fidget-tools { gap: .5rem .8rem; } }