/* =====================================================================
   POOLSIDE KEYDOWN! A heavy modification of how Keydown looks inside Waterflow.
   Clear cyan and blue water with crisp orange: life rings, lane ropes and pool tiles.
   It only changes how things are DRAWN (the Keydown text is never touched), and it
   switches off with Settings > Keydown style > Classic Keydown (body[data-kd="classic"]).
   Keydown's own rules start with :is(#wysiwyg-canvas, .kd-doc, body), so these start with an id too.
   ===================================================================== */
body[data-kd="poolside"] {
    --pk-ink: #0b3552; --pk-water: #1b9be8; --pk-deep: #0a68c4; --pk-cyan: #22c8f0; --pk-foam: #e6f8ff; --pk-tile: #bfeaf9;
    --pk-orange: #ff8a1b; --pk-orange-d: #c85f00; --pk-sun: #fff0dc;
}
body[data-kd="poolside"][data-theme="night"] {
    --pk-ink: #dff3ff; --pk-water: #4fc3ff; --pk-deep: #8fd6ff; --pk-cyan: #4fe0ff; --pk-foam: #12354f; --pk-tile: #1e4d6e;
    --pk-orange: #ff9b3d; --pk-orange-d: #ffb066; --pk-sun: #3a2a14;
}
body[data-kd="poolside"][data-theme="sand"] { --pk-water: #1b9be8; --pk-deep: #0a68c4; --pk-orange-d: #b85500; }

/* ---------- the page: a faint pool-tile floor ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) {
    color: var(--pk-ink);
    background-image: linear-gradient(rgba(27, 155, 232, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 155, 232, .055) 1px, transparent 1px);
    background-size: 36px 36px;
}
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(strong, b) { color: var(--pk-deep); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(em, i) { color: var(--pk-orange-d); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) a { color: var(--pk-water); text-decoration: underline; text-decoration-color: var(--pk-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- headings: a lane rope, a life ring, a tile ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h1 { position: relative; color: var(--pk-deep); border-bottom: 0; padding-bottom: 14px; margin: 18px 0 16px; font-weight: 800; letter-spacing: -.2px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h1::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--pk-orange) 0 14px, #fff 14px 28px); box-shadow: 0 0 0 1px rgba(27, 155, 232, .35); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h2 { color: var(--pk-water); font-weight: 700; margin: 26px 0 8px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h2::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; vertical-align: -.03em; border-radius: 50%; background: conic-gradient(var(--pk-orange) 0 25%, #fff 0 50%, var(--pk-orange) 0 75%, #fff 0); -webkit-mask: radial-gradient(circle, transparent 0 34%, #000 36%); mask: radial-gradient(circle, transparent 0 34%, #000 36%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h3 { color: var(--pk-orange-d); font-weight: 700; margin: 20px 0 6px; padding-bottom: 3px; border-bottom: 2px dotted var(--pk-cyan); display: inline-block; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) h4 { color: var(--pk-deep); font-size: .8em; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; }

/* ---------- quotes: a pool tile with an orange edge ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.blockquote-list:not([class*="kd-bq-"]) { margin: 14px 0; padding: 12px 18px 12px 20px; background: var(--pk-foam); color: var(--pk-ink); border: 1px solid var(--pk-tile); border-left: 7px solid var(--pk-orange); border-radius: 4px 14px 14px 4px; box-shadow: 0 2px 8px rgba(27, 155, 232, .14); font-style: normal; }

/* ---------- lists: orange life-ring markers ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.bulleted-list > li::before { color: var(--pk-orange); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.bulleted-list li::marker, body[data-kd="poolside"] :is(#wf-visual, #wf-view) ol li::marker { color: var(--pk-orange); font-weight: 800; }

/* ---------- tables: tiles ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) table { border-collapse: separate; border-spacing: 0; border: 2px solid var(--pk-water); border-radius: 12px; overflow: hidden; background: var(--pk-foam); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(th, td) { border: 0; border-right: 1px solid var(--pk-tile); border-bottom: 1px solid var(--pk-tile); padding: 7px 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) th { background: var(--pk-water); color: #fff; border-bottom: 3px solid var(--pk-orange); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) tr:nth-child(even) td { background: rgba(27, 155, 232, .08); }

/* ---------- code: a deep-water console for fences with no style of their own ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb:not([class*="kd-cb-"]) { background: #06323d; color: #d4f5fb; border: 1px solid #0f6a7d; border-left: 6px solid var(--pk-orange); border-radius: 12px; padding: 14px 16px; box-shadow: inset 0 2px 10px rgba(0, 20, 30, .4); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb:not([class*="kd-cb-"]) code { background: none; border: 0; color: inherit; padding: 0; box-shadow: none; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :not(pre) > code:not(.kd-ic) { background: var(--pk-foam); border: 1px solid var(--pk-tile); color: var(--pk-deep); border-radius: 6px; box-shadow: none; }

/* ---------- blanks and practice boxes: written on pool tile, answered in orange ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-fill { border-bottom-color: var(--pk-orange); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-blank { border-color: var(--pk-water); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-blank-label { color: var(--pk-orange-d); }

/* ---------- ORIGINAL POOLSIDE STYLES ----------
   Every mark of Poolside Keydown is drawn with its own design, not with Keydown's gel, rim or toast looks:
   each one below clears the Keydown look completely (all: unset) and is built again from lane ropes, rings, tiles and water.
   They only apply to the elements Poolside marks produce, inside Poolside notes. */
body[data-kd="poolside"] {
    --pk-o: #ff8a1b; --pk-o2: #ffe3c2; --pk-od: #8a3d00;
    --pk-c: #18bfe8; --pk-c2: #d4f6ff; --pk-cd: #055a78;
    --pk-b: #1b7fe0; --pk-b2: #d6ebff; --pk-bd: #0b3f9a;
}
body[data-kd="poolside"][data-theme="night"] { --pk-o2: #4a2a0c; --pk-od: #ffc98f; --pk-c2: #0d4256; --pk-cd: #9fe8fb; --pk-b2: #12335e; --pk-bd: #a8cfff; }

/* the elements Poolside marks produce are cleared of every Keydown look first (each selector is listed on its own, so the specific rules below always win) */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-chip-waterdrop,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-chip-waterdrop::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-chip-waterdrop::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ha,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ha::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ha::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ha,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ha::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ha::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-mk,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-mk::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-mk::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-mk,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-mk::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-mk::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-ink,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-ink::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-ink::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ink,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ink::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ink::after { all: unset; }

/* <ring>: a life ring, striped orange and white all the way round */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-orange { display: inline-block; padding: 0 13px; border: 3px solid transparent; border-radius: 999px; color: var(--pk-od); font-weight: 700; background: linear-gradient(var(--pk-o2), var(--pk-o2)) padding-box, repeating-linear-gradient(90deg, var(--pk-o) 0 9px, #fff 9px 18px) border-box; }
/* <lap>: a lane rope under the words */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-cyan { display: inline; padding-bottom: 3px; color: var(--pk-cd); font-weight: 700; background: repeating-linear-gradient(90deg, var(--pk-c) 0 8px, #fff 8px 16px) left bottom / 100% 5px no-repeat; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* <reef>: a wave under the words */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdouble-chip.gel-rim-blue { display: inline; color: var(--pk-bd); font-weight: 700; text-decoration: underline wavy var(--pk-b) 2px; text-underline-offset: 5px; }
/* <buoy>: an orange float with a white band */
/* <foam>: sea foam, a cyan patch full of bubbles */
/* <deep>: the deep end, a dark blue block with a cyan waterline */
body[data-kd="poolside"][data-theme="night"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-blue { background: linear-gradient(180deg, #4fd2f5 0 4px, #1d4f94 4px); color: #e6f3ff; }
/* <sun>: a sun with rays beside orange words */
/* <lagoon>: a lagoon, water shaded from the edges, in a double frame */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-cyan { display: inline-block; padding: 0 13px; border-radius: 9px; color: var(--pk-cd); font-weight: 700; background: linear-gradient(90deg, #eafcff, #a6ecfc 50%, #eafcff); box-shadow: inset 0 0 0 2px var(--pk-c), inset 0 0 0 4px #fff; }
body[data-kd="poolside"][data-theme="night"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-cyan { background: linear-gradient(90deg, #0b3547, #115a73 50%, #0b3547); box-shadow: inset 0 0 0 2px var(--pk-c), inset 0 0 0 4px #082a38; }
/* <tile>: a square of pool tile with its grout lines */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-blue { display: inline-block; padding: 1px 11px; border: 2px solid var(--pk-b); border-radius: 2px; color: var(--pk-bd); font-weight: 700; background-color: var(--pk-b2); background-image: linear-gradient(rgba(27, 127, 224, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 127, 224, .35) 1px, transparent 1px); background-size: 8px 8px; }
/* <drop>: a water drop, round with one pointed corner */
/* <halo> and <sunhalo>: a soft ring of light round the words */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ha { padding: 0 4px; border-radius: 7px; color: inherit; background: rgba(24, 191, 232, .13); box-shadow: 0 0 0 3px rgba(24, 191, 232, .28), 0 0 12px rgba(24, 191, 232, .5); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ha { padding: 0 4px; border-radius: 7px; color: inherit; background: rgba(255, 138, 27, .12); box-shadow: 0 0 0 3px rgba(255, 138, 27, .3), 0 0 12px rgba(255, 138, 27, .5); }
/* <mark> and <flag>: a highlighter stroke across the lower half */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-mk { padding: 0 4px; color: inherit; background: linear-gradient(transparent 48%, rgba(24, 191, 232, .5) 48% 90%, transparent 90%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-mk { padding: 0 4px; color: inherit; background: linear-gradient(transparent 48%, rgba(255, 138, 27, .5) 48% 90%, transparent 90%); }
/* <ink> and <fire>: written with a pen, in blue or orange ink */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-ink { color: var(--pk-bd); font: italic 600 1.05em Georgia, "Times New Roman", serif; text-shadow: 0 0 1px rgba(11, 63, 154, .35); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-ink { color: #d96a00; font: italic 700 1.05em Georgia, "Times New Roman", serif; text-shadow: 0 0 1px rgba(217, 106, 0, .35); }


/* ---------- MORE POOLSIDE CHIPS (24 more, each with its own original design) ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerobubble-chip.gel-aero-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerobubble-chip.gel-aero-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerobubble-chip.gel-aero-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeromark-chip.gel-aero-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeromark-chip.gel-aero-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeromark-chip.gel-aero-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeronotice-chip.gel-aero-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeronotice-chip.gel-aero-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeronotice-chip.gel-aero-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-orb.gel-c,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-orb.gel-c::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-orb.gel-c::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroring-chip.gel-aero-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroring-chip.gel-aero-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroring-chip.gel-aero-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroglow-chip.gel-aero-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroglow-chip.gel-aero-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroglow-chip.gel-aero-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aero-chip.gel-aero-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aero-chip.gel-aero-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aero-chip.gel-aero-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-ticket-chip.gel-ticket-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-ticket-chip.gel-ticket-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-ticket-chip.gel-ticket-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-speech-chip.gel-speech-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-speech-chip.gel-speech-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-speech-chip.gel-speech-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-pill-chip.gel-pill-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-pill-chip.gel-pill-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-pill-chip.gel-pill-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-flag-chip.gel-flag-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-flag-chip.gel-flag-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-flag-chip.gel-flag-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-tab-chip.gel-tab-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-tab-chip.gel-tab-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-tab-chip.gel-tab-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-split-chip.gel-split-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-split-chip.gel-split-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-split-chip.gel-split-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-lens-chip.gel-lens-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-lens-chip.gel-lens-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-lens-chip.gel-lens-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdots-chip.gel-rim-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdots-chip.gel-rim-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdots-chip.gel-rim-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimstripe-chip.gel-rim-orange,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimstripe-chip.gel-rim-orange::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimstripe-chip.gel-rim-orange::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimfrost-chip.gel-rim-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimfrost-chip.gel-rim-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimfrost-chip.gel-rim-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimneon-chip.gel-rim-blue,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimneon-chip.gel-rim-blue::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimneon-chip.gel-rim-blue::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimaurora-chip.gel-rim-cyan,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimaurora-chip.gel-rim-cyan::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimaurora-chip.gel-rim-cyan::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ul,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ul::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ul::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-st,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-st::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-st::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-bx,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-bx::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-bx::after { all: unset; }
/* <bubble>: a round bubble with a shine */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerobubble-chip.gel-aero-cyan { display: inline-block; padding: 1px 15px; border-radius: 999px; color: var(--pk-cd); font-weight: 600; background: radial-gradient(circle at 24% 26%, #fff 0 4px, transparent 5px), radial-gradient(circle at 50% 70%, rgba(24, 191, 232, .1), rgba(24, 191, 232, .34)); box-shadow: inset 0 0 0 2px var(--pk-c), inset -3px -5px 7px rgba(24, 191, 232, .3); }
/* <pennant>: a pennant pointing the way */
/* <sign>: a pool sign with an orange header */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeronotice-chip.gel-aero-blue { display: inline-block; padding: 3px 11px 0; color: var(--pk-bd); font-weight: 800; background: #fff; border: 2px solid var(--pk-b); border-top: 6px solid var(--pk-o); border-radius: 3px; }
/* <pearl>: a pearl */
/* <hoop>: a hoop: rings inside rings */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroring-chip.gel-aero-orange { display: inline-block; padding: 0 15px; border-radius: 999px; color: var(--pk-od); font-weight: 700; box-shadow: 0 0 0 2px var(--pk-o), inset 0 0 0 2px #fff, inset 0 0 0 4px var(--pk-o); }
/* <beam>: an underwater light beam */
/* <mist>: a patch of mist */
/* <badge>: a lifeguard badge with a white cross */
/* <pass>: a pool pass with notched sides */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-ticket-chip.gel-ticket-blue { display: inline-block; padding: 1px 18px; color: var(--pk-bd); font-weight: 700; background: var(--pk-b2); border: 2px dashed var(--pk-b); border-radius: 6px; -webkit-mask: radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) right / 51% 100% no-repeat; }
/* <say>: a speech bubble with a tail */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-speech-chip.gel-speech-cyan { position: relative; display: inline-block; margin-bottom: 8px; padding: 0 13px; color: var(--pk-cd); font-weight: 600; background: var(--pk-c2); border: 2px solid var(--pk-c); border-radius: 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-speech-chip.gel-speech-cyan::after { content: ""; position: absolute; left: 14px; bottom: -9px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--pk-c); }
/* <capsule>: a two-tone capsule */
/* <banner>: a swallowtail banner */
/* <tab>: a folder tab with an orange base */
/* <splash>: a splash with flying drops */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan { position: relative; display: inline-block; padding: 0 13px; color: var(--pk-cd); font-weight: 700; background: var(--pk-c2); border-radius: 50% / 62% 62% 38% 38%; box-shadow: inset 0 -3px 0 var(--pk-c), 0 0 0 2px var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan::before { content: ""; position: absolute; top: -6px; left: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-drop-chip.gel-drop-cyan::after { content: ""; position: absolute; top: -9px; right: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--pk-c); }
/* <split>: a chip split in two tones */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-split-chip.gel-split-orange { display: inline-block; padding: 0 13px; border: 2px solid var(--pk-o); border-radius: 6px; color: var(--pk-od); font-weight: 700; background: linear-gradient(100deg, color-mix(in srgb, var(--pk-o) 38%, var(--pk-o2)) 0 12px, var(--pk-o2) 12px); }
/* <lens>: a glass lens */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-lens-chip.gel-lens-cyan { display: inline-block; padding: 0 13px; border-radius: 999px; color: var(--pk-cd); font-weight: 700; background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .95) 0 11%, rgba(255, 255, 255, 0) 30%), rgba(24, 191, 232, .16); box-shadow: inset 0 0 0 3px var(--pk-c), 0 0 0 3px #fff, 0 0 0 5px var(--pk-c); }
/* <dots>: a dotted lane line */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimdots-chip.gel-rim-cyan { display: inline-block; padding: 0 13px; border: 3px dotted var(--pk-c); border-radius: 999px; color: var(--pk-cd); font-weight: 700; background: var(--pk-c2); }
/* <cone>: a cone: orange and white stripes */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimstripe-chip.gel-rim-orange { display: inline-block; padding: 0 13px; border-radius: 4px; color: var(--pk-od); font-weight: 800; background: repeating-linear-gradient(135deg, var(--pk-o) 0 8px, #fff 8px 16px); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; box-shadow: 0 0 0 2px var(--pk-o); }
/* <frost>: frosted glass */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimfrost-chip.gel-rim-cyan { display: inline-block; padding: 0 14px; border-radius: 10px; color: var(--pk-cd); font-weight: 600; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95), inset 0 0 12px rgba(24, 191, 232, .55), 0 0 0 1px var(--pk-c); }
/* <neon>: a blue neon sign */
/* <shimmer>: water shimmer with an orange edge */
/* <under>: a thick cyan underline */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-cyan.an-s-ul { color: inherit; font-weight: 600; text-decoration: underline var(--pk-c) 4px; text-underline-offset: 4px; }
/* <strike>: struck through in orange */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-orange.an-s-st { color: inherit; opacity: .85; text-decoration: line-through var(--pk-o) 3px; }
/* <frame>: four corner marks, like a camera frame */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) mark.an-hl.an-hl-blue.an-s-bx { display: inline-block; padding: 0 8px; color: var(--pk-bd); font-weight: 700; background: linear-gradient(var(--pk-b), var(--pk-b)) 0 0 / 9px 2px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 0 0 / 2px 9px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 100% 0 / 9px 2px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 100% 0 / 2px 9px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 0 100% / 9px 2px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 0 100% / 2px 9px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 100% 100% / 9px 2px no-repeat, linear-gradient(var(--pk-b), var(--pk-b)) 100% 100% / 2px 9px no-repeat; }

/* ---------- FLAT CHIPS: a thin border in the main colour and a lighter fill of it (like the flat buttons) ---------- */
/* <buoy>: an orange float */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-orange { position: relative; display: inline-block; padding: 0 13px 0 29px; border: 2px solid var(--pk-o); border-radius: 999px; background: var(--pk-o2); color: var(--pk-od); font-weight: 700; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-orange::before { content: ""; position: absolute; left: 8px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 3px solid var(--pk-o); box-sizing: border-box; }
/* <foam>: sea foam full of bubbles */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-cyan { display: inline-block; padding: 0 11px; border: 2px solid var(--pk-c); border-radius: 12px 4px 12px 4px; color: var(--pk-cd); font-weight: 600; background: radial-gradient(circle at 10% 30%, #fff 0 3px, transparent 4px), radial-gradient(circle at 38% 74%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 28%, #fff 0 2.5px, transparent 3.5px), radial-gradient(circle at 92% 70%, #fff 0 2px, transparent 3px), var(--pk-c2); }
/* <deep>: the deep end, with a cyan waterline on top */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-bubble-chip.gel-chip-blue { display: inline-block; padding: 0 12px; border: 2px solid var(--pk-b); border-radius: 3px 3px 8px 8px; color: var(--pk-bd); font-weight: 700; background: linear-gradient(180deg, #4fd2f5 0 4px, var(--pk-b2) 4px); }
/* <sun>: a sun with rays beside orange words */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-orange { position: relative; display: inline-block; padding: 0 13px 0 29px; border: 2px solid var(--pk-o); border-radius: 4px 14px 14px 4px; background: var(--pk-o2); color: var(--pk-od); font-weight: 700; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aerotoast-chip.gel-aero-orange::before { content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle, var(--pk-o) 0 36%, transparent 38%), repeating-conic-gradient(var(--pk-o) 0 11deg, transparent 11deg 30deg); }
/* <drop>: a water drop with one pointed corner */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-chip-waterdrop { position: relative; display: inline-block; padding: 0 14px; border: 2px solid var(--pk-b); border-radius: 15px 15px 15px 2px; color: var(--pk-bd); font-weight: 700; background: var(--pk-b2); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-chip-waterdrop::before { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(27, 127, 224, .35); }
/* <mist> and <pearl>: soft cyan, with a thin cyan border */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aero-chip.gel-aero-cyan { display: inline-block; padding: 0 13px; border: 2px solid var(--pk-c); border-radius: 42% 58% 55% 45% / 60% 45% 55% 40%; color: var(--pk-cd); font-weight: 600; background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .9), transparent 56%), var(--pk-c2); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-orb.gel-c { display: inline-block; min-width: 1.5em; padding: 0 10px; text-align: center; border: 2px solid var(--pk-c); border-radius: 999px; color: var(--pk-cd); font-weight: 700; background: radial-gradient(circle at 32% 28%, #fff 0 12%, var(--pk-c2) 55%); }
/* <beam>: an underwater light beam */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeroglow-chip.gel-aero-blue { display: inline-block; padding: 0 14px; border: 2px solid var(--pk-b); border-radius: 4px; color: var(--pk-bd); font-weight: 700; background: radial-gradient(ellipse at 50% 0, rgba(79, 210, 245, .55) 0 10%, transparent 65%), var(--pk-b2); box-shadow: 0 0 10px rgba(79, 210, 245, .5); }
/* <neon>: a blue neon sign */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimneon-chip.gel-rim-blue { display: inline-block; padding: 0 14px; border: 2px solid #4fa8ff; border-radius: 999px; color: var(--pk-bd); font-weight: 700; background: var(--pk-b2); box-shadow: 0 0 8px rgba(79, 168, 255, .6), inset 0 0 6px rgba(79, 168, 255, .3); }
/* <shimmer>: water shimmer */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-rimaurora-chip.gel-rim-cyan { display: inline-block; padding: 0 14px; border: 2px solid var(--pk-c); border-radius: 8px; color: var(--pk-cd); font-weight: 700; background: linear-gradient(110deg, var(--pk-c2), var(--pk-b2) 45%, var(--pk-c2) 62%, var(--pk-b2)); }
/* <capsule>: a capsule, half cyan and half blue */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-pill-chip.gel-pill-cyan { display: inline-block; padding: 0 15px; border: 2px solid var(--pk-b); border-radius: 999px; color: var(--pk-bd); font-weight: 700; background: linear-gradient(90deg, var(--pk-c2) 50%, var(--pk-b2) 50%); }
/* <tab>: a folder tab with an orange base */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-tab-chip.gel-tab-blue { display: inline-block; padding: 3px 14px 0; border: 2px solid var(--pk-b); border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--pk-bd); font-weight: 700; background: var(--pk-b2); box-shadow: inset 0 -3px 0 var(--pk-o); }
/* <pennant> and <banner> and <badge>: cut shapes with a main-colour outline and a lighter fill */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeromark-chip.gel-aero-orange { position: relative; isolation: isolate; display: inline-block; padding: 0 24px 0 12px; color: var(--pk-od); font-weight: 700; background: var(--pk-o); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-aeromark-chip.gel-aero-orange::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--pk-o2); clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-flag-chip.gel-flag-orange { position: relative; isolation: isolate; display: inline-block; padding: 0 24px 0 12px; color: var(--pk-od); font-weight: 700; background: var(--pk-o); clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 50%, 100% 100%, 0 100%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-flag-chip.gel-flag-orange::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--pk-o2); clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange { position: relative; isolation: isolate; display: inline-block; padding: 1px 15px 1px 28px; color: var(--pk-od); font-weight: 700; background: var(--pk-o); clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);letter-spacing: .4px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--pk-o2); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .gel-logo-chip.gel-logo-orange::after { content: ""; position: absolute; left: 10px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; background: linear-gradient(var(--pk-o), var(--pk-o)) center / 100% 3.5px no-repeat, linear-gradient(var(--pk-o), var(--pk-o)) center / 3.5px 100% no-repeat; }

/* ---------- callouts: <! an alert ring, <? a question ring, <> a pulled quote between two lane ropes ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-pull, blockquote.kd-bq-gradient),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-pull, blockquote.kd-bq-gradient)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-pull, blockquote.kd-bq-gradient)::after { all: unset; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-gradient) { position: relative; display: block; margin: 14px 0; padding: 12px 18px 12px 58px; border-radius: 12px; line-height: 1.55; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-neon { background: var(--pk-o2); color: var(--pk-od); border: 2px solid var(--pk-o); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-glass { background: var(--pk-c2); color: var(--pk-cd); border: 2px dashed var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-gradient)::before { content: ""; position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 0 8px, #000 9px); mask: radial-gradient(circle, transparent 0 8px, #000 9px); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-neon::before { background: repeating-conic-gradient(var(--pk-o) 0 45deg, #fff 45deg 90deg); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-glass::before { background: repeating-conic-gradient(var(--pk-c) 0 45deg, #fff 45deg 90deg); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(blockquote.kd-bq-neon, blockquote.kd-bq-glass, blockquote.kd-bq-gradient)::after { position: absolute; left: 14px; top: 50%; width: 30px; margin-top: -11px; text-align: center; font: 800 18px/22px system-ui, sans-serif; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-neon::after { content: "!"; color: var(--pk-od); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-glass::after { content: "?"; color: var(--pk-cd); }
/* <: the same note in blue */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-gradient { background: var(--pk-b2); color: var(--pk-bd); border: 3px dotted var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-gradient::before { background: repeating-conic-gradient(var(--pk-b) 0 45deg, #fff 45deg 90deg); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-gradient::after { content: ":"; color: var(--pk-bd); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-pull { display: block; margin: 22px 0; padding: 22px 16px; text-align: center; color: var(--pk-bd); font: italic 500 1.3em/1.45 Georgia, "Times New Roman", serif; background: repeating-linear-gradient(90deg, var(--pk-o) 0 14px, #fff 14px 28px) top / 100% 5px no-repeat, repeating-linear-gradient(90deg, var(--pk-c) 0 14px, #fff 14px 28px) bottom / 100% 5px no-repeat; }

/* ---------- bullets: ring, drop, bubble, tile and wave markers ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.bulleted-list[class*="kd-bl-"] > li::before { content: ""; display: inline-block; min-width: 0; width: .62em; height: .62em; margin-right: .6em; vertical-align: .02em; font-size: inherit; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.kd-bl-dash > li::before { border-radius: 50%; background: conic-gradient(var(--pk-o) 0 25%, #fff 0 50%, var(--pk-o) 0 75%, #fff 0); -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 33%); mask: radial-gradient(circle, transparent 0 30%, #000 33%); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.kd-bl-plus > li::before { border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.9); background: var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.kd-bl-ring > li::before { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 14%, var(--pk-c) 16%); box-shadow: 0 0 0 1px var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.kd-bl-diamond > li::before { border-radius: 1px; background: var(--pk-o); transform: rotate(45deg) scale(.85); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) ul.kd-bl-arrow > li::before { width: .55em; height: .55em; border-top: 3px solid var(--pk-b); border-right: 3px solid var(--pk-b); transform: rotate(45deg) scale(.8); margin-right: .7em; }

/* ---------- dividers: ten lane marks, none of Keydown's ---------- */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) :is(.kd-div-line, .kd-div-label)::after { all: unset; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) { --dv: var(--pk-b); display: flex; align-items: center; gap: 16px; margin: 22px 0; user-select: none; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan { --dv: var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange { --dv: var(--pk-o); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-blue { --dv: var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) .kd-div-line { display: block; flex: 1; min-width: 12px; height: 10px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) :is(.kd-div-poolside, .kd-div-dual, .kd-div-notched, .kd-div-swallow, .kd-div-triple, .kd-div-stepped, .kd-div-rim, .kd-div-glass, .kd-div-gel, .kd-div-aqua) .kd-div-label { display: block; color: var(--pk-bd); font: 800 .78em/1 system-ui, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-poolside .kd-div-line { height: 8px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--dv) 0 14px, #fff 14px 28px); box-shadow: 0 0 0 1px var(--dv); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dual .kd-div-line { height: 14px; background: linear-gradient(var(--dv), var(--dv)) top / 100% 3px no-repeat, linear-gradient(var(--dv), var(--dv)) bottom / 100% 3px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-notched .kd-div-line { height: 12px; background: repeating-linear-gradient(90deg, var(--dv) 0 12px, transparent 12px 17px); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-swallow .kd-div-line { height: 12px; background: var(--dv); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x center / 24px 12px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6Q6 0 12 6T24 6' fill='none' stroke='black' stroke-width='2.6'/%3E%3C/svg%3E") repeat-x center / 24px 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-triple .kd-div-line { height: 16px; background: linear-gradient(var(--dv), var(--dv)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--dv), var(--dv)) 12% 50% / 76% 2px no-repeat, linear-gradient(var(--dv), var(--dv)) 24% 100% / 52% 2px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stepped .kd-div-line { height: 16px; background: var(--dv); clip-path: polygon(0 100%, 0 75%, 20% 75%, 20% 50%, 40% 50%, 40% 25%, 60% 25%, 60% 0, 100% 0, 100% 100%); opacity: .85; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-rim .kd-div-line { height: 16px; background: radial-gradient(circle, transparent 0 3px, var(--dv) 4px 6px, transparent 7px) left center / 16px 16px no-repeat, radial-gradient(circle, transparent 0 3px, var(--dv) 4px 6px, transparent 7px) right center / 16px 16px no-repeat, linear-gradient(var(--dv), var(--dv)) center / calc(100% - 28px) 3px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glass .kd-div-line { height: 12px; border-radius: 7px; background: linear-gradient(90deg, rgba(24, 191, 232, .08), rgba(24, 191, 232, .38), rgba(24, 191, 232, .08)); box-shadow: inset 0 0 0 1px var(--dv); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-gel .kd-div-line { height: 16px; background: radial-gradient(circle, var(--dv) 0 5px, transparent 6px) left center / 22px 16px repeat-x; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-aqua .kd-div-line { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #8ee8ff, var(--dv)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); }


/* ===== MORE POOLSIDE MARKS: ten note styles, fourteen more dividers, nine code styles, the pool cover and picture frames ===== */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-marker,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-marker::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-marker::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-whisper,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-whisper::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-whisper::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-paper,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-paper::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-paper::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-terminal,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-terminal::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-terminal::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-ribbon,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-ribbon::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-ribbon::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-bubble,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-bubble::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-bubble::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-card,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-card::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-card::after { all: unset; }
/* <*: a highlighter note, <+: a tip, <-: a stop note */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-marker { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 8px 14px 8px 18px; border-left: 6px solid var(--pk-c); background: linear-gradient(transparent 14%, rgba(24, 191, 232, .26) 14% 86%, transparent 86%); color: var(--pk-ink); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 12px 18px 12px 58px; border: 2px solid #f5ac00; border-radius: 12px; background: #fff6d4; color: #8a5300; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green::before { content: ""; position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: repeating-conic-gradient(#f5ac00 0 45deg, #fff 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 0 8px, #000 9px); mask: radial-gradient(circle, transparent 0 8px, #000 9px); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-green::after { content: "+"; position: absolute; left: 14px; top: 50%; width: 30px; margin-top: -11px; text-align: center; font: 800 18px/22px system-ui, sans-serif; color: #8a5300; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 12px 18px 12px 58px; border: 2px solid #f4511e; border-radius: 12px; background: #ffece5; color: #b5300b; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red::before { content: ""; position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: repeating-conic-gradient(#f4511e 0 45deg, #fff 45deg 90deg); -webkit-mask: radial-gradient(circle, transparent 0 8px, #000 9px); mask: radial-gradient(circle, transparent 0 8px, #000 9px); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-red::after { content: "\00d7"; position: absolute; left: 14px; top: 50%; width: 30px; margin-top: -11px; text-align: center; font: 800 18px/22px system-ui, sans-serif; color: #b5300b; }
/* <=: a lane box, <~: a whisper */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 12px 18px; border: 2px dashed var(--pk-c); border-radius: 6px; color: var(--pk-ink); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed::before { content: ""; position: absolute; left: -2px; top: -2px; width: 14px; height: 14px; border-top: 4px solid var(--pk-o); border-left: 4px solid var(--pk-o); border-radius: 6px 0 0 0; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-dashed::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-bottom: 4px solid var(--pk-o); border-right: 4px solid var(--pk-o); border-radius: 0 0 6px 0; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-whisper { display: block; margin: 10px 0; padding: 2px 14px; border-left: 3px dotted var(--pk-c); color: color-mix(in srgb, var(--pk-ink) 62%, transparent); font-style: italic; font-size: .93em; }
/* <$: a sticky note taped on, <#: a console note */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-paper { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 16px 18px 12px; border: 2px solid var(--pk-o); border-radius: 4px; background: var(--pk-o2); color: var(--pk-od); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-paper::before { content: ""; position: absolute; top: -10px; left: 50%; width: 56px; height: 16px; margin-left: -28px; background: rgba(24, 191, 232, .32); border: 1px solid rgba(24, 191, 232, .75); transform: rotate(-3deg); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-terminal { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 11px 16px 11px 36px; border: 2px solid var(--pk-b); border-radius: 8px; background: var(--pk-b2); color: var(--pk-bd); font: 600 .95em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-terminal::before { content: ">"; position: absolute; left: 14px; top: 11px; color: var(--pk-o); font-weight: 800; }
/* <^: a ribbon note, <@: a speech bubble, <&: a tile card */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-ribbon { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 12px 18px; border: 2px solid var(--pk-o); border-left-width: 14px; border-radius: 4px 14px 14px 4px; background: var(--pk-o2); color: var(--pk-od); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-bubble { position: relative; display: block; margin: 14px 0; line-height: 1.55; margin-bottom: 22px; padding: 12px 18px; border: 2px solid var(--pk-c); border-radius: 18px; background: var(--pk-c2); color: var(--pk-cd); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-bubble::after { content: ""; position: absolute; left: 24px; bottom: -11px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) blockquote.kd-bq-card { position: relative; display: block; margin: 14px 0; line-height: 1.55; padding: 14px 18px; border: 1px solid var(--pk-tile); border-top: 5px solid var(--pk-o); border-radius: 10px; background: #fff; color: var(--pk-ink); box-shadow: 0 4px 14px rgba(27, 155, 232, .18); }
body[data-kd="poolside"][data-theme="night"] :is(#wf-visual, #wf-view) blockquote.kd-bq-card { background: var(--pk-foam); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest :is(.kd-div-line, .kd-div-label)::after,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket :is(.kd-div-line, .kd-div-label),
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket :is(.kd-div-line, .kd-div-label)::before,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket :is(.kd-div-line, .kd-div-label)::after { all: unset; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket { --dv: var(--pk-b); display: flex; align-items: center; gap: 16px; margin: 22px 0; user-select: none; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest .kd-div-line,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket .kd-div-line { display: block; flex: 1; min-width: 12px; height: 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest .kd-div-label,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket .kd-div-label { display: block; color: var(--pk-bd); font: 800 .78em/1 system-ui, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-wavy,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-dotted,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-dashed,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-zigzag,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-glow,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-ruler,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-stitched,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-bubbles,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-scallop,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-neon,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-arrows,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-fade,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-crest,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-cyan.kd-div-ticket { --dv: var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-wavy,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-dotted,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-dashed,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-zigzag,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-glow,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-ruler,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-stitched,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-bubbles,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-scallop,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-neon,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-arrows,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-fade,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-crest,
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-c-orange.kd-div-ticket { --dv: var(--pk-o); }
/* the fourteen more dividers: ripple, dots, dash, zigzag, glow, ruler, stitch, bubbles, scallop, beacon, arrows, fade, crest and ticket */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-wavy .kd-div-line { height: 14px; background: var(--dv); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M0 4Q3 0 6 4T12 4 M0 10Q3 6 6 10T12 10' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 12px 14px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E%3Cpath d='M0 4Q3 0 6 4T12 4 M0 10Q3 6 6 10T12 10' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 12px 14px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dotted .kd-div-line { height: 10px; background: radial-gradient(circle, var(--dv) 0 2.5px, transparent 3px) left center / 12px 10px repeat-x; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-dashed .kd-div-line { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--dv) 0 18px, transparent 18px 26px); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-zigzag .kd-div-line { height: 12px; background: var(--dv); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 10L6 2L12 10' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 12px 12px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 10L6 2L12 10' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 12px 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-glow .kd-div-line { height: 4px; border-radius: 2px; background: var(--dv); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--dv) 55%, transparent); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ruler .kd-div-line { height: 16px; background: repeating-linear-gradient(90deg, var(--dv) 0 2px, transparent 2px 10px) bottom / 100% 7px no-repeat, repeating-linear-gradient(90deg, var(--dv) 0 2px, transparent 2px 50px) bottom / 100% 14px no-repeat, linear-gradient(var(--dv), var(--dv)) bottom / 100% 2px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-stitched .kd-div-line { height: 8px; background: repeating-linear-gradient(90deg, var(--dv) 0 8px, transparent 8px 13px) center / 100% 2px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-bubbles .kd-div-line { height: 18px; background: radial-gradient(circle at 8px 12px, transparent 0 3px, var(--dv) 3.5px 4.5px, transparent 5px), radial-gradient(circle at 24px 6px, transparent 0 2px, var(--dv) 2.5px 3.5px, transparent 4px), radial-gradient(circle at 36px 11px, transparent 0 4px, var(--dv) 4.5px 5.5px, transparent 6px); background-size: 48px 18px; background-repeat: repeat-x; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-scallop .kd-div-line { height: 10px; background: radial-gradient(circle at 10px 0, transparent 0 7px, var(--dv) 7.5px 9px, transparent 9.5px) 0 0 / 20px 10px repeat-x; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-neon .kd-div-line { height: 16px; background: radial-gradient(circle, var(--pk-o) 0 4px, transparent 4.5px) left center / 16px 16px no-repeat, radial-gradient(circle, var(--pk-o) 0 4px, transparent 4.5px) right center / 16px 16px no-repeat, linear-gradient(var(--dv), var(--dv)) center / calc(100% - 24px) 3px no-repeat; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--dv) 70%, transparent)); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-arrows .kd-div-line { height: 12px; background: var(--dv); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M2 1L8 6L2 11' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 14px 12px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12'%3E%3Cpath d='M2 1L8 6L2 11' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x center / 14px 12px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-fade .kd-div-line { height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--dv) 22% 78%, transparent); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-crest .kd-div-line { height: 16px; background: radial-gradient(ellipse at 50% 100%, var(--dv) 0 7px, transparent 7.5px) center bottom / 40px 16px no-repeat, linear-gradient(var(--dv), var(--dv)) bottom / 100% 3px no-repeat; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-div-ticket .kd-div-line { height: 14px; background: radial-gradient(circle, var(--dv) 0 2px, transparent 2.5px) left center / 10px 100% repeat-x; border-left: 6px solid var(--dv); border-right: 6px solid var(--dv); border-radius: 7px; }
/* code styles: deep, foam, buoy, lane, tile, night, glow, drop and diff (Keydown blueprint, paper, ember, terminal, mac, dark, neon, gel, diff) */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb { margin: 14px 0; padding: 14px 16px; border-width: 2px; border-style: solid; border-radius: 12px; box-shadow: none; text-shadow: none; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb[data-title]::before { margin: -14px -16px 10px; padding: 5px 16px; border-radius: 10px 10px 0 0; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: .05em; background: rgba(27, 127, 224, .14); color: var(--pk-bd); border-bottom: 2px solid var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-blueprint { border-color: var(--pk-b); background: linear-gradient(rgba(27,127,224,.16) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(27,127,224,.16) 1px, transparent 1px) 0 0 / 16px 16px, var(--pk-b2); color: var(--pk-bd);  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-blueprint[data-title]::before { background: rgba(27,127,224,.2); color: var(--pk-bd); border-bottom: 2px solid var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-paper { border-color: var(--pk-c); background: var(--pk-c2); color: var(--pk-cd);  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-paper[data-title]::before { background: rgba(24,191,232,.22); color: var(--pk-cd); border-bottom: 2px solid var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-ember { border-color: var(--pk-o); background: var(--pk-o2); color: var(--pk-od);  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-ember[data-title]::before { background: rgba(255,138,27,.22); color: var(--pk-od); border-bottom: 2px solid var(--pk-o); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-terminal { border-color: var(--pk-c); background: var(--pk-c2); color: var(--pk-cd);  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-terminal[data-title]::before { background: repeating-linear-gradient(90deg, #ffc58a 0 14px, #fff 14px 28px); color: var(--pk-cd); border-bottom: 2px solid var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-terminal .kd-ln::before { color: var(--pk-o); opacity: 1; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-mac { border-color: var(--pk-b); background: var(--pk-b2); color: var(--pk-bd); padding-top: 42px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-mac[data-title]::before { background: rgba(27,127,224,.16); color: var(--pk-bd); border-bottom: 2px solid var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-mac[data-title]::before, body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-mac::before { margin: 0; padding: 0 0 0 74px; height: 30px; line-height: 30px; background: radial-gradient(circle at 16px 50%, var(--pk-o) 0 5px, transparent 5.5px), radial-gradient(circle at 36px 50%, var(--pk-c) 0 5px, transparent 5.5px), radial-gradient(circle at 56px 50%, var(--pk-b) 0 5px, transparent 5.5px), rgba(27,127,224,.16); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-dark { border-color: #4fa8ff; background: #0d2a4a; color: #cfeaff;  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-dark[data-title]::before { background: #12395e; color: #cfeaff; border-bottom: 2px solid #4fa8ff; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-neon { border-color: var(--pk-c); background: var(--pk-c2); color: var(--pk-cd); box-shadow: 0 0 12px rgba(24,191,232,.55), inset 0 0 8px rgba(24,191,232,.25); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-neon[data-title]::before { background: rgba(24,191,232,.22); color: var(--pk-cd); border-bottom: 2px solid var(--pk-c); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-gel { border-color: var(--pk-b); background: var(--pk-b2); color: var(--pk-bd); border-radius: 22px 22px 22px 4px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-gel[data-title]::before { background: rgba(27,127,224,.16); color: var(--pk-bd); border-bottom: 2px solid var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-diff { border-color: var(--pk-b); background: var(--pk-b2); color: var(--pk-bd);  }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-diff[data-title]::before { background: rgba(27,127,224,.16); color: var(--pk-bd); border-bottom: 2px solid var(--pk-b); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-diff .kd-ln-add { background: rgba(24,191,232,.3); color: var(--pk-cd); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) pre.kd-cb.kd-cb-diff .kd-ln-del { background: rgba(255,138,27,.3); color: var(--pk-od); }
/* <cover>: a pool cover, striped blue tarp with a blue edge, pulled back when you click it */
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-spoiler { padding: 0 .4em; border: 2px solid var(--pk-b); border-radius: 6px; background: repeating-linear-gradient(135deg, var(--pk-b2) 0 7px, #fff 7px 14px); color: transparent !important; text-shadow: none !important; cursor: pointer; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-spoiler[data-open] { border-color: var(--pk-o); background: var(--pk-o2); color: var(--pk-od) !important; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) .kd-spoiler[data-open] * { color: inherit !important; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) figure.kd-figure { display: table; margin: 14px 0; padding: 6px; border: 2px solid var(--pk-c); border-radius: 12px; background: var(--pk-c2); }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) figure.kd-figure img { display: block; max-width: 100%; border-radius: 8px; }
body[data-kd="poolside"] :is(#wf-visual, #wf-view) figure.kd-figure figcaption { margin-top: 6px; color: var(--pk-cd); font-size: .88em; font-style: italic; text-align: center; }

/* ---------- the Poolside Keydown reference in the Guide ---------- */
.pk-guide h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .9px; color: #c85f00; }
.pk-guide .pk-lead { margin: 0 0 6px; color: var(--mute, #4d6e89); font-size: 13px; }
.pk-row { display: grid; grid-template-columns: minmax(150px, 42%) 1fr; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px dotted rgba(27, 155, 232, .3); }
.pk-row code { font: 12.5px ui-monospace, Menlo, Consolas, monospace; color: #0a68c4; background: #e6f8ff; border: 1px solid #bfeaf9; border-radius: 6px; padding: 3px 7px; word-break: break-word; }
.pk-draw > * { margin: 0 !important; }
.pk-draw h1, .pk-draw h2, .pk-draw h3 { font-size: 1.15em !important; }
@media (max-width: 600px) { .pk-row { grid-template-columns: 1fr; } }