/* SCUTTLE controls: one row of round glass buttons, bottom right (the same frosted glass as the Sandbox sand pad,
   .sand__ui in site.css). The bug and BG buttons open their pads above the row, one at a time; a click anywhere else
   folds them away (scuttle.js). */
.scuttle { touch-action: none; }
.sc-body, .sc-round, .sc-paused, .sc-card {
  background: rgba(247,247,247,.62); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 20px rgba(0,0,0,.12); color: var(--ink); }
[data-theme=dark] .sandbox .sc-body, [data-theme=dark] .sandbox .sc-round, [data-theme=dark] .sandbox .sc-paused, [data-theme=dark] .sandbox .sc-card {
  background: rgba(26,26,26,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 20px rgba(0,0,0,.3); }

.sc-bar { position: fixed; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; }
:where(.sc-pad button) { border: 0; background: none; padding: 0; font: inherit; color: inherit; }
/* Pads open above the row, lined up with its right end. */
.sc-body { position: absolute; bottom: calc(100% + 12px); right: 0; border-radius: 20px; padding: 8px 16px 10px; font-size: 13px; }
.sc-pad:not(.is-open) .sc-body { display: none; }
#pad-crawler { width: 300px; max-height: calc(100svh - 170px); overflow-y: auto; }
#pad-bg { white-space: nowrap; padding: 4px 14px; }
.sc-fold[aria-expanded=true] { background: var(--ink) !important; color: var(--bg); }
.sc-fold--text { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.sc-round .sc-bug { width: 28px; height: auto; fill: currentColor; stroke: none; }

.sc-row { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.sc-row--sub { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); margin: 0 0 6px 4px; }
.sc-label { width: 46px; flex: none; opacity: .6; }
.sc-modes { display: flex; gap: 10px; }
.sc-mode { position: relative; width: 18px; height: 18px; border-radius: 50%; flex: none; transition: transform .2s ease; }
.sc-mode::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.sc-mode:hover { transform: scale(1.12); }
.sc-mode[aria-pressed=true] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sc-mode--multi { background: conic-gradient(#ff2e9a, #ffd60a, #9be39b, #3fd0ff, #6a6cff, #ff2e9a); }
.sc-mode--glow { background: #0a0a0c; box-shadow: 0 0 7px 2px #ff2e9a; }
.sc-mode--glow[aria-pressed=true] { box-shadow: 0 0 7px 2px #ff2e9a, 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sc-mode--white { background: #fff; box-shadow: 1.5px 2px 3px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.12); }
.sc-mode--white[aria-pressed=true] { box-shadow: 1.5px 2px 3px rgba(0,0,0,.75), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sc-mode--solid { background: radial-gradient(circle, #7cf2c8 0 45%, transparent 46%), conic-gradient(from 90deg, #ff5a5a, #ffd23f, #6be36b, #3fd0ff, #6a6cff, #e45cff, #ff5a5a); }

/* Colour pickers: a rainbow ring with the picked colour in its middle; the native input covers it. */
.sc-swatch { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: conic-gradient(from 90deg, #ff5a5a, #ffd23f, #6be36b, #3fd0ff, #6a6cff, #e45cff, #ff5a5a); }
.sc-swatch::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--pick, transparent); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.sc-swatch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); opacity: 0; padding: 0; border: 0; cursor: pointer; }
.sc-swatch:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.sc-swatch[hidden] { display: none; }

.sc-chip { min-height: 28px; padding: 0 10px; border-radius: 14px; opacity: .6;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.sc-chip:hover, .sc-chip:focus-visible { opacity: 1; }
.sc-chip[aria-pressed=true] { opacity: 1; background: color-mix(in srgb, var(--ink) 12%, transparent); }

.sc-icon { display: grid; place-items: center; width: 28px; height: 28px; opacity: .6; }
.sc-icon:hover, .sc-icon:focus-visible { opacity: 1; }
.sc-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Both toggles show what a click will do: the sun in dark mode (go light), the moon in light mode. */
.sc-theme .sc-theme__sun, [data-theme=dark] .sc-theme .sc-theme__moon { display: none; }
[data-theme=dark] .sc-theme .sc-theme__sun { display: block; }
.sc-theme .sc-theme__moon { display: block; }

.sc-sliders { display: grid; gap: 2px; padding-top: 4px; }
.sc-slider { display: grid; grid-template-columns: 112px 1fr 38px; align-items: center; gap: 8px; min-height: 26px; }
.sc-slider span { opacity: .6; white-space: nowrap; }
.sc-slider output { text-align: right; font-variant-numeric: tabular-nums; opacity: .85; }
.sc-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
.sc-slider input::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.sc-slider input::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 28%, transparent); }
.sc-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--ink); }
.sc-slider input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); }
.sc-slider input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.sc-round { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0; transition: transform .2s ease; }
.sc-round:hover { transform: scale(1.06); }
.sc-round svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-round .faint { opacity: .5; }
.sc-round:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sc-round[aria-pressed=true] { background: var(--ink) !important; color: var(--bg); }
/* Burrow's arrow points back up while it's underground. */
#burrow[aria-pressed=true] svg { rotate: 180deg; }

.sc-paused { position: fixed; left: 50%; top: 92px; translate: -50% 0; margin: 0; padding: 8px 16px; border-radius: 18px; font-size: 13px; pointer-events: none; }
.sc-paused[hidden] { display: none; }

/* Phones: the row sits a little lower and the pads fit the screen. */
@media (max-width: 760px) {
  .sc-bar { right: 16px; bottom: 16px; gap: 8px; }
  #pad-crawler { width: min(300px, calc(100vw - 32px)); }
}

/* Not following: over the ground the site's round cursor carries a bold + that cycles through the rainbow (feed). */
.cursor[data-mode=feed] .cursor__shape { position: relative; width: 22px; height: 22px; }
.cursor[data-mode=feed] .cursor__shape::before, .cursor[data-mode=feed] .cursor__shape::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 3.5px; border-radius: 2px; translate: -50% -50%; background: #ff2e9a; animation: sc-feed-hue 1.8s linear infinite; }
.cursor[data-mode=feed] .cursor__shape::after { rotate: 90deg; }
@keyframes sc-feed-hue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cursor[data-mode=feed] .cursor__shape::before, .cursor[data-mode=feed] .cursor__shape::after { animation: none; } }
/* Ground shifting toggle: struck-through waves while the ground is moving (click to stop it), plain waves while
   it holds still (click to start it again). */
.sc-shift .sc-shift__off { display: none; }
.sc-shift[aria-pressed=true] .sc-shift__off { display: inline; }
/* The characters toggle reads "abc", struck through while they're hidden. */
.sc-chars { font-weight: 600; letter-spacing: .04em; }
.sc-chars[aria-pressed=false] { text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Definition card, bottom left: fades in for each word dropped. Word in bold, phonetics thin, then the meaning,
   wrapped in a narrow rectangle. */
.sc-card { position: fixed; left: 20px; bottom: 20px; width: 250px; margin: 0; padding: 14px 16px 15px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none; opacity: 0; translate: 0 8px; transition: opacity .45s ease, translate .45s ease; }
.sc-card.is-on { opacity: 1; translate: 0 0; }
.sc-card[hidden] { display: none; }
.sc-card__word { font-size: 18px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.sc-card__say { font-size: 13px; font-weight: 300; line-height: 1.35; opacity: .72; word-break: break-all; }
.sc-card__mean { margin: 7px 0 0; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 760px) { .sc-card { left: 16px; top: 84px; bottom: auto; width: min(250px, calc(100vw - 32px)); } }
@media (prefers-reduced-motion: reduce) { .sc-card { transition: none; } }
/* Hovering a round button: the cursor becomes a ring just outside it, instead of the nav pill. */
.cursor[data-mode=round] .cursor__shape { width: 54px; height: 54px; background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
[data-theme=dark] .cursor[data-mode=round] .cursor__shape { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
/* Randomize: a die showing three faces, its pips filled. */
.sc-round .pip circle { fill: currentColor; stroke: none; }