/* micro.css: the cursor over the left panel (micro.js). Only set while micro.js has the pointer there
   (.mc-on), so phones, touch and reduced motion never lose their cursor. Links and buttons keep theirs. */
.mc-dot { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: 0; will-change: transform; }
.stage.mc-on, .stage.mc-on * { cursor: none; }
.stage.mc-on a, .stage.mc-on a *, .stage.mc-on button, .stage.mc-on button * { cursor: pointer; }

/* the overprint: a copy of the panel's type in the accent, over it, clipped by micro.js to the dot's printed cells */
.stage.mc-ink { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; color: var(--accent); background: none; }
.stage.mc-ink * { color: var(--accent) !important; transition: none !important; -webkit-text-stroke: .6px var(--accent); }
/* a finished takeover: the text itself in the accent, so the resting state is exactly red */
/* (with the copy's hairline stroke, so the hand-over from the copy to the text itself never thins the letters) */
.stage .mc-red, .stage .mc-red * { color: var(--accent) !important; -webkit-text-stroke: .6px var(--accent); }
.stage.mc-ink .ctx dl, .stage.mc-ink .foot { border-color: var(--accent); }
.stage.mc-ink .steps button, .stage.mc-ink .bar i { background: var(--accent) !important; }

/* SKETCH (cursor-sketch.js, only with ?cursor= / ?pulse=): the dot over the whole page */
.cs-blot { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; will-change: transform; image-rendering: pixelated; }
html.cs-on, html.cs-on body, html.cs-on .evidence, html.cs-on .evidence *, html.cs-on .lightbox, html.cs-on .lightbox * { cursor: none !important; }
.sketch .cs-switch { display: inline-flex; gap: 6px; margin-left: 6px; }
.sketch .cs-switch a { color: inherit; opacity: .55; text-decoration: none; }
.sketch .cs-switch a.on { opacity: 1; text-decoration: underline; }
/* A: the link under the dot turns red */
html.cs-a .evidence a.cs-hot, html.cs-a .lightbox a.cs-hot { color: var(--accent); }
/* B: the hover looks come from the takeover, not from :hover */
html.cs-b .contact .btn { transition: none; }
html.cs-b .contact .btn:not(.cs-hot):hover { background: var(--accent); border-color: var(--accent); }
html.cs-b .contact .btn.ghost:not(.cs-hot):hover { background: none; border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
html.cs-b .listen .play-mine { transition: none; }
html.cs-b .listen .play-mine:not(.cs-hot):hover { background: var(--accent); color: var(--paper); }
html.cs-b .contact nav a:not(.cs-hot):hover { color: inherit; }
html.cs-b .card .try .full:not(.cs-hot):hover { background: var(--paper); color: var(--accent); }
html.cs-b .cs-hot:not(.btn):not(.play-mine):not(.full):not(.ptry), html.cs-b .cs-hot:not(.btn):not(.play-mine):not(.full):not(.ptry) * { color: var(--accent); -webkit-text-stroke: .6px var(--accent); }
.cs-ink.cs-look-text, .cs-ink.cs-look-text * { color: var(--accent) !important; -webkit-text-stroke: .6px var(--accent); }
.cs-ink.cs-look-btn { background-color: var(--ink) !important; border-color: var(--ink) !important; color: var(--paper) !important; }
.cs-ink.play-mine { background-color: var(--paper) !important; color: var(--accent) !important; }
.cs-ink.btn.ghost { background-color: transparent !important; color: var(--ink) !important; }
html.cs-pulse, html.cs-pulse * { -webkit-tap-highlight-color: transparent; }