/* Base look of the Plyxl bot. Colours come in as variables so any scheme can
 * wear any animation. Every hidden layer is opacity 0, never display:none, so
 * a keyframe can fade it in. */
:root {
  --body: #161614;
  --face: #ffffff;
  --accent: #6fa8dc;
  --accent-ink: #ffffff;
  --gold: #f2b544;
  --paper: #ffffff;
  --shadow: rgba(22, 22, 20, 0.12);
  --blush: #f09a8e;
}
.pbot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* every group transforms about its own box unless an animation says otherwise */
.pbot g, .pbot rect, .pbot circle, .pbot ellipse, .pbot path {
  transform-box: fill-box;
  transform-origin: center;
}
/* ...except shapes drawn with a transform attribute (a tilted rail, a rotated
 * eye, the sunburst's rays): those name their own centre, and a CSS origin
 * would silently move it */
.pbot [transform] { transform-box: view-box; transform-origin: 0 0; }

.pbot .body, .pbot .fx-front, .pbot .fx-back { fill: var(--body); }
.pbot .stk { stroke: var(--body); fill: none; }
.pbot .face { fill: var(--face); }
.pbot .fstk { stroke: var(--face); fill: none; }
.pbot .feat { fill: var(--face); }
.pbot .acc { fill: var(--accent); }
.pbot .on-acc { stroke: var(--accent-ink); }
.pbot .on-acc-stroke { stroke: var(--accent-ink); }
.pbot .gold { fill: var(--gold); }
.pbot .gold-ink { fill: color-mix(in oklab, var(--gold), #000 35%); }
.pbot .gold-stroke { stroke: var(--gold); }
.pbot .paper { fill: var(--paper); stroke: var(--body); stroke-width: 3; }
.pbot .punch { fill: var(--bg, #fff); }
.pbot .fx-stroke { stroke: var(--body); }
.pbot .fx-stroke-acc { stroke: var(--accent); }
.pbot .glint { fill: var(--body); }
.pbot .shade { fill: #101010; }
.pbot .shade-glint { fill: rgba(255, 255, 255, 0.5); }
.pbot .check-mark { stroke: var(--accent-ink); }
.pbot .cursor-shape { fill: var(--body); stroke: var(--paper); }
.pbot .shine { fill: rgba(255, 255, 255, 0.35); }
.pbot .bubble-body { fill: var(--paper); stroke: var(--body); stroke-width: 3.5; }
.pbot .bubble .bd { fill: var(--body); }
.pbot .tip { fill: var(--body); }
.pbot .shadow { fill: var(--shadow); transform-origin: center; }
.pbot .rings, .pbot .orbit { stroke: var(--accent); fill: none; }
.pbot .ring { stroke: var(--accent); }
.pbot .orbit ellipse { stroke: var(--accent); }
.pbot .sunburst { fill: var(--gold); }
.pbot .ghosts rect { fill: var(--accent); }
.pbot .blush ellipse, .pbot .cheeks ellipse { fill: var(--blush); }
.pbot .sweat .drop, .pbot .tear .drop { fill: #8cc6f0; }
.pbot .wv { stroke: var(--accent); }
.pbot .hearts .ht { fill: #e8766b; }
.pbot .sparkles .sp { fill: var(--gold); }
.pbot .stars-ring .sr { fill: var(--gold); }
.pbot .rain .rd { fill: #8cc6f0; }
.pbot .snow .sn { fill: #cfe3f5; stroke: var(--body); stroke-width: 1; }
.pbot .pixels .px { fill: var(--body); }
.pbot .glitch .g2 { fill: #e8766b; }

/* outline style: the body becomes a stroke, the features the body colour */
.pbot.is-outline .body, .scheme-outline .pbot .body { fill: var(--paper); stroke: var(--body); stroke-width: 7; stroke-linejoin: round; }
.pbot.is-outline .body .stk, .scheme-outline .pbot .body .stk { stroke: var(--body); }
.pbot.is-outline .face, .scheme-outline .pbot .face { fill: var(--body); }
.pbot.is-outline .fstk, .scheme-outline .pbot .fstk { stroke: var(--body); }
.pbot.is-outline .glint, .scheme-outline .pbot .glint { fill: var(--paper); }

/* ---- default visibility --------------------------------------------------
 * Wrapped in :where() so any animation's selector outranks the resting state. */
:where(.pbot) .fx { opacity: 0; }
:where(.pbot) .e { opacity: 0; }
:where(.pbot) .e-open { opacity: 1; }
:where(.pbot) .m { opacity: 0; }
:where(.pbot.mouth-smile) .m-smile, :where(.pbot.mouth-grin) .m-grin, :where(.pbot.mouth-flat) .m-flat,
:where(.pbot.mouth-o) .m-o, :where(.pbot.mouth-cat) .m-cat, :where(.pbot.mouth-smirk) .m-smirk,
:where(.pbot.mouth-tongue) .m-tongue, :where(.pbot.mouth-talk) .m-talk, :where(.pbot.mouth-teeth) .m-teeth,
:where(.pbot.mouth-wavy) .m-wavy, :where(.pbot.mouth-frown) .m-frown, :where(.pbot.mouth-whistle) .m-whistle,
:where(.pbot.mouth-oo) .m-oo, :where(.pbot.mouth-dot) .m-dot, :where(.pbot.mouth-hook) .m-hook, :where(.pbot.mouth-d) .m-d { opacity: 1; }
:where(.pbot) .cheeks { opacity: 0; }
:where(.pbot.has-cheeks) .cheeks { opacity: 0.9; }
:where(.pbot.is-wink .eye-r) .e-open { opacity: 0; }
:where(.pbot.is-wink .eye-r) .e-shut { opacity: 1; }
:where(.pbot.is-wink-l .eye-l) .e-open { opacity: 0; }
:where(.pbot.is-wink-l .eye-l) .e-shut { opacity: 1; }

/* ---- where props rest (individual `translate`, so `transform` stays free
 *      for keyframes) ---------------------------------------------------- */
.pbot .mail { translate: 178px 26px; }
.pbot .cal { translate: 184px 22px; }
.pbot .gear { translate: 196px 44px; }
.pbot .gear2 { translate: 176px 26px; }
.pbot .tiles { translate: 176px 44px; }
.pbot .magnifier { translate: 190px 50px; }
.pbot .plane { translate: 180px 30px; }
.pbot .cup { translate: 184px 150px; }
.pbot .coin { translate: 196px 50px; }
.pbot .pencil { translate: 196px 40px; }
.pbot .doc { translate: 184px 30px; }
.pbot .wrench { translate: 180px 36px; }
.pbot .code { translate: 188px 34px; }
.pbot .flag { translate: 186px 20px; }
.pbot .chart { translate: 180px 30px; }
.pbot .key { translate: 176px 50px; }
.pbot .lock { translate: 186px 24px; }
.pbot .pin { translate: 196px 50px; }
.pbot .cursor { translate: 170px 150px; }
.pbot .stars-ring .sr-1 { translate: 120px 40px; }
.pbot .stars-ring .sr-2 { translate: 80px 48px; }
.pbot .stars-ring .sr-3 { translate: 160px 48px; }
.pbot .scan { translate: 0 72px; }

@media (prefers-reduced-motion: reduce) {
  .motion-gate:not(.force-motion) .pbot *,
  .motion-gate:not(.force-motion) .pbot { animation-play-state: paused !important; }
}

/* hearts are always love-red, whatever the accent is */
.pbot .e-heart .acc, .pbot .heart-big .acc { fill: var(--love, #e8766b); }
/* keep the punctuation clear of the right rail */
.pbot .exclaim { translate: 14px -2px; }
.pbot .question { translate: 14px -6px; }
.pbot .bubble { translate: 8px -6px; }

/* screen face: an inset panel with glowing features */
.pbot .screen { fill: var(--screen, #0f1a22); }
.pbot.has-screen .face { fill: var(--glow, #7ef0b5); }
.pbot.has-screen .fstk { stroke: var(--glow, #7ef0b5); }
/* plate face: features in the body colour on a pale plate */
.pbot.has-screen.is-plate .screen { fill: var(--face); }
.pbot.has-screen.is-plate .face { fill: var(--body); }
.pbot.has-screen.is-plate .fstk { stroke: var(--body); }
/* pixel: crisp edges, no curves on the strokes */
.pbot.is-pixel { shape-rendering: crispEdges; }
.pbot.is-pixel .fstk { stroke-linecap: square; stroke-linejoin: miter; }