/* marker: the easter egg. A highlighter over a selection left a second, its words in the serif, the coach beside (Tommi, 2026-10-02).
   The ink multiplies: on paper it is a yellow band under dark letters, on a night section it turns the white letters
   yellow, with a faint glow for the band. Each blend is a whole layer's, since a blend inside a layer stops at the
   layer. Above the sections, under the bar and the questions box. Needs ../base/base.css. */
.mk{position:absolute;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none;mix-blend-mode:multiply}   /* the blend is the layer's */
.mk.mk-glow{mix-blend-mode:screen}
.mk[hidden]{display:none}
.mk-ink{position:absolute;display:block;border-radius:5px 14px 7px 16px / 12px 6px 14px 7px;background:oklch(93% .19 106);transform-origin:0 50%;will-change:transform}
.mk-glow .mk-ink{background:oklch(93% .19 106/.26)}
::selection{background:oklch(93% .19 106/.42);color:inherit}   /* already the ink while dragging: letting go changes no colour */
html.mk-on ::selection{background:transparent}

/* the selected words in the titles' italic serif: copies on a layer over the text, each on its word's baseline, the
   word under it turned transparent (marker.js), so the text never changes size. A word changes as the pen reaches it */
.mk-words{position:absolute;left:0;top:0;width:0;height:0;z-index:89;pointer-events:none}
.mk-wd{position:absolute;left:0;top:0;white-space:nowrap;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;line-height:normal;letter-spacing:0;visibility:hidden;user-select:none}
.mk-wd.on{visibility:visible}
.mk-probe{display:inline-block;width:0;height:0}
.mk-test{position:absolute;left:0;top:0;white-space:nowrap;visibility:hidden}
.mk-hide,.mk-hide::selection{color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

.mk-coach{position:absolute;z-index:96;will-change:transform,opacity;color:oklch(97% .01 262);font-size:calc(15 * var(--px));line-height:1.4}
.mk-coach.mk-in{animation:mk-pop .32s cubic-bezier(.34,1.5,.64,1) backwards}
.mk-coach.under.mk-in{animation-name:mk-pop-under}
@keyframes mk-pop{from{opacity:0;transform:translateY(8px) scale(.7)}}
@keyframes mk-pop-under{from{opacity:0;transform:translateY(-8px) scale(.7)}}
.mk-ask,.mk-coach.mk-open{background:oklch(21% .05 262/.97);box-shadow:inset 0 1px 0 oklch(100% 0 0/.12),0 0 0 1px oklch(100% 0 0/.08),0 18px 44px -16px oklch(18% .08 262/.6)}
.mk-ask{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 18px 5px 5px;border:0;border-radius:999px;color:inherit;font:inherit;font-weight:620;white-space:nowrap;cursor:pointer;transition:background .2s}
.mk-ask:hover{background:oklch(27% .06 262/.94)}
.mk-coach img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px oklch(93% .19 106)}

/* opened: the coach's card, the answer writing itself under its face */
.mk-coach.mk-open{display:grid;gap:10px;width:min(340px,100vw - 24px);padding:12px 14px 14px;border-radius:22px}
.mk-coach.mk-open-in{animation:mk-grow .3s cubic-bezier(.34,1.4,.64,1)}
@keyframes mk-grow{from{opacity:.6;transform:scale(.94)}}
.mk-head{display:flex;align-items:center;gap:10px;font-weight:650}
.mk-close{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:oklch(100% 0 0/.1);color:inherit;font-size:19px;line-height:1;cursor:pointer}
.mk-coach p{font-size:calc(15.5 * var(--px));line-height:1.45;text-wrap:pretty}
.mk-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;background:oklch(93% .19 106);animation:mk-blink .9s steps(1) infinite}
@keyframes mk-blink{50%{opacity:0}}
.mk-demo{display:inline-flex;align-items:center;gap:4px;justify-self:start;color:oklch(93% .19 106);font-weight:600;animation:sale .4s var(--e-esce)}
.mk-demo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.mk-dots{display:inline-flex;gap:5px;padding:6px 2px}
.mk-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;animation:mk-dot 1s infinite ease-in-out}
.mk-dots i:nth-child(2){animation-delay:.15s}.mk-dots i:nth-child(3){animation-delay:.3s}
@keyframes mk-dot{50%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.mk-coach.mk-in,.mk-coach.mk-open-in,.mk-dots i,.mk-caret,.mk-demo{animation:none}}