/* /brand/explore: help choose the OpenVibe mark and the menu button (server/views/marks-explore.js). Theme variables
   from the Frame; each mark keeps its own colours. Tight on a phone: every row is a sideways rail there, and "Sheet"
   shows all fifty at once. Motion: cards rise and their marks draw in as they arrive, then idle; nothing spins, and
   nothing moves for a reader who asks for less motion (or presses Still). */
.mx-wrap{--mx-face:'OV Brand',Nunito,Inter,-apple-system,BlinkMacSystemFont,sans-serif;--mx-lockface:'OV Brand',Nunito,sans-serif;--mx-card:var(--bg-secondary,#101828);--mx-line:var(--border,#1f2d47);--mx-muted:var(--text-muted,#7386a3);max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,36px) clamp(12px,3vw,32px) 120px;color:var(--text-primary,#e8edf3)}
.mx-wrap svg{display:block;overflow:visible}
.mx-defs{position:absolute;width:0;height:0;overflow:hidden}
.mx-wrap [hidden]{display:none!important}
.mx-hero{display:grid;gap:8px;max-width:860px;margin:0 0 clamp(14px,2.4vw,24px)}
.mx-eye{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#4f7cff)}
/* The top shows what was chosen: the mark and the menu button, large, each with its name. No line naming the page. */
.mx-won{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px;margin:0 0 6px}
.mx-won-card{display:grid;justify-items:center;gap:10px;margin:0;padding:18px 10px 14px;border-radius:20px;border:1px solid color-mix(in srgb,var(--accent,#4f7cff) 38%,var(--mx-line));background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent,#4f7cff) 16%,transparent),transparent 70%),var(--mx-card);animation:mxWon .5s cubic-bezier(.2,.9,.3,1.15) both}
.mx-won-card:nth-child(2){animation-delay:.08s}
@keyframes mxWon{from{opacity:0;transform:translateY(calc(10px*var(--ov-move,1))) scale(.97)}}
.mx-won-card figcaption{display:grid;gap:2px;text-align:center}
.mx-won-card figcaption b{font-family:var(--mx-face);font-size:15px}
.mx-won-card figcaption span{font-size:12px;color:var(--mx-muted)}
.mx-won-btn{display:grid;place-items:center;width:72px;height:53px;color:var(--text-primary,#e6edf7)}
.mx-won-btn svg{fill:currentColor}.mx-won-bar{fill:none;stroke:currentColor;stroke-width:1.9}.mx-won-a{fill:var(--accent-light,#60a5fa)}
.mx-hero h1{margin:0;font-family:var(--mx-face);font-weight:900;font-size:clamp(26px,4.2vw,46px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.mx-lede,.mx-how{margin:0;max-width:72ch;font-size:clamp(14.5px,1.6vw,16px);line-height:1.55;color:var(--text-secondary,#b4bfcc)}
.mx-lede b,.mx-how b{color:var(--text-primary,#e8edf3)}

/* What people picked so far (marks.js redraws it after each save): the Loop against the Pair, and the most picked. */
.mx-tally{display:grid;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:16px;border:1px solid color-mix(in srgb,#8b5cf6 40%,var(--mx-line));background:linear-gradient(135deg,color-mix(in srgb,#4f7cff 10%,var(--mx-card)),color-mix(in srgb,#8b5cf6 12%,var(--mx-card)))}
.mx-tally-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;color:var(--text-secondary,#b4bfcc)}
.mx-tally-h b{font-family:var(--mx-face);font-weight:900;font-size:17px;color:var(--text-primary,#e8edf3)}
.mx-tally-lead{margin-left:auto;font-weight:700;color:#c4b5fd}
.mx-lean{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.mx-lean-end{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.mx-lean-end b{font-family:var(--mx-face);font-weight:900;font-size:16px;min-width:3ch}
.mx-lean-r b{text-align:right}
.mx-lean-bar{position:relative;height:10px;border-radius:999px;background:#8b5cf6;overflow:hidden}
.mx-lean-bar i{position:absolute;inset:0 auto 0 0;width:var(--l,50%);background:#4f7cff;border-right:2px solid var(--mx-card);transition:width var(--ov-dur-4, .6s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1))}
.mx-tops{display:flex;align-items:center;gap:8px;min-width:0}
.mx-tops-k{flex:none;width:92px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mx-muted)}
.mx-tops-list{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:1px}
.mx-tops-list::-webkit-scrollbar{display:none}
.mx-tops-list em{font-size:13px;color:var(--mx-muted)}
.mx-top{flex:none;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:#0d1322;color:#e8edf3;font-size:12.5px}
.mx-top b{font-family:var(--mx-face);font-weight:900}
.mx-top i{font-style:normal;font-weight:800;color:#c4b5fd}
.mx-top svg,.mx-lean-end svg{display:block;flex:none}
.mx-top.is-new{animation:mxTopIn var(--ov-dur-4, .5s) var(--ov-ease-spring, cubic-bezier(.2,.9,.25,1.2)) both}
@keyframes mxTopIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.mx-mini-m{width:26px;height:26px;border-radius:50%;--mb-c:#c9d3e0}
.mx-tally.is-empty .mx-lean-bar{opacity:.4}
@media (max-width:640px){.mx-tops-k{width:auto}.mx-tops{flex-direction:column;align-items:flex-start;gap:4px}.mx-tops-list{max-width:100%}}

/* The choice: 1, the mark (the Loop or the Pair, side by side); 2, separately, the menu button's look. */
.mx-choose{display:grid;gap:8px;margin:0 0 12px}
.mx-q{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:6px 0 0;font-size:15px;color:var(--text-secondary,#b4bfcc)}
.mx-q b{color:var(--text-primary,#e8edf3);font-family:var(--mx-face);font-weight:900;font-size:17px}
.mx-q small{font-size:13px;color:var(--mx-muted)}
.mx-qn{display:inline-grid;place-items:center;align-self:center;width:22px;height:22px;border-radius:50%;background:#8b5cf6;color:#fff;font-size:12.5px;font-weight:800}
.mx-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:10px}
.mx-or{align-self:center;font-family:var(--mx-face);font-weight:900;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--mx-muted)}
.mx-tab{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--mx-line);background:var(--mx-card);color:inherit;text-decoration:none;transition:border-color var(--ov-dur-2, .2s),background var(--ov-dur-2, .2s)}
.mx-tab:hover{border-color:color-mix(in srgb,#8b5cf6 55%,var(--mx-line))}
.mx-tab[aria-selected=true]{border-color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 12%,var(--mx-card));box-shadow:0 0 0 1px #8b5cf6 inset}
.mx-tab-art{position:relative;flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:14px;background:#0d1322;color:#e8edf3;overflow:hidden}
.mx-tab-art svg{width:46px;height:46px}
/* The tab's example walks through all fifty (marks.js): each take rises in as the last one leaves, its number below. */
.mx-ta{position:absolute;inset:0;display:grid;place-items:center}
.mx-ta.is-in{animation:mxTaIn var(--ov-dur-4, .62s) var(--ov-ease-spring, cubic-bezier(.2,.9,.25,1.15)) both}
.mx-ta.is-out{animation:mxTaOut var(--ov-dur-3, .42s) var(--ov-ease-out, cubic-bezier(.4,0,.6,1)) both}
@keyframes mxTaIn{from{opacity:0;transform:translateY(55%) scale(.6)}to{opacity:1;transform:none}}
@keyframes mxTaOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-55%) scale(.6)}}
.mx-tab-code{position:absolute;right:3px;bottom:3px;padding:0 4px;border-radius:5px;background:#8b5cf6;color:#fff;font:800 9.5px/14px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.02em}
.mx-tab-code:empty{display:none}
.mx-tab-t{display:grid;gap:2px;min-width:0}
.mx-tab-t b{font-family:var(--mx-face);font-weight:900;font-size:19px;line-height:1.15}
.mx-tab-t small{font-size:13px;line-height:1.35;color:var(--text-secondary,#b4bfcc)}
.mx-tab-t em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--mx-muted)}
.mx-tab-side{padding:8px 12px;border-style:dashed;max-width:620px}
.mx-tab-side[aria-selected=true]{border-style:solid}
.mx-tab-side .mx-tab-art{width:46px;height:46px;border-radius:12px}
.mx-tab-side .mx-tab-t b{font-size:16px}

/* The steps bar: once the big tabs have scrolled away it waits under the navbar, so switching between the mark and the
   menu button never means scrolling back up (the owner, 11-01). Each step shows how many you picked there. */
.mx-steps{position:fixed;z-index:55;left:50%;top:calc(var(--ovnav-real-h,56px) + 8px);display:flex;align-items:center;gap:4px;max-width:calc(100vw - 16px);padding:4px;border-radius:999px;border:1px solid color-mix(in srgb,#8b5cf6 45%,var(--mx-line));background:color-mix(in srgb,var(--mx-card) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.35);transform:translate(-50%,-12px);opacity:0;pointer-events:none;transition:opacity var(--ov-dur-2, .25s),transform var(--ov-dur-3, .35s) var(--ov-ease-spring, cubic-bezier(.2,.9,.25,1.1))}
.mx-steps.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.mx-steps-k{padding:0 4px 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
.mx-steps-sep{width:1px;height:22px;margin:0 2px;background:var(--mx-line)}
.mx-step{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:3px 11px 3px 6px;border-radius:999px;color:inherit;text-decoration:none;font-weight:750;font-size:13.5px;white-space:nowrap}
.mx-step svg,.mx-step .mb-btn{flex:none}
.mx-step .mb-btn{width:22px;height:22px}
.mx-step[aria-current=true]{background:#8b5cf6;color:#fff}
.mx-step[aria-current=true] .mb-btn{--mb-c:#fff;--mb-a:#fff}
.mx-step i{font-style:normal;font-size:11px;font-weight:800;padding:0 5px;border-radius:999px;background:#ffffff26}
.mx-step i:empty{display:none}
/* The end of each choice: where to go next. */
.mx-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.mx-next a{display:grid;gap:2px;padding:14px 16px;border-radius:16px;border:1px solid var(--mx-line);background:var(--mx-card);color:inherit;text-decoration:none}
.mx-next a:last-child{border-color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 14%,var(--mx-card))}
.mx-next b{font-family:var(--mx-face);font-weight:900;font-size:17px}
.mx-next small{font-size:13px;color:var(--text-secondary,#b4bfcc)}
@media (max-width:640px){.mx-steps-k{display:none}.mx-step{padding:3px 9px 3px 5px;font-size:12.5px;gap:5px}.mx-next{grid-template-columns:1fr}}

/* The bar: the name, its font and style, the view. Sticky on wide screens. */
.mx-tools{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:0 0 6px;padding:8px 10px;border-radius:14px;border:1px solid var(--mx-line);background:color-mix(in srgb,var(--mx-card) 92%,transparent);backdrop-filter:blur(10px);z-index:20}
.mx-tool{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.mx-tool-k{flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
.mx-chips{display:flex;gap:4px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px}
.mx-chips::-webkit-scrollbar{display:none}
.mx-chip{flex:none;padding:5px 10px;min-height:32px;border-radius:999px;border:1px solid var(--mx-line);background:transparent;color:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.mx-chip small{font-family:Inter,system-ui,sans-serif;font-size:10.5px;font-weight:600;color:var(--mx-muted)}
.mx-chip:hover{border-color:#8b5cf6}
.mx-chip[aria-pressed=true]{background:#8b5cf6;border-color:#8b5cf6;color:#fff}
.mx-chip[aria-pressed=true] small{color:#eee8ff}
.mx-own{flex:none;width:96px;min-height:32px;padding:4px 10px;border-radius:999px;border:1px dashed var(--mx-line);background:transparent;color:inherit;font:inherit;font-size:13.5px}
.mx-own:focus{outline:none;border-color:#8b5cf6;border-style:solid}

/* Rows of cards. */
.mx-row{margin-top:18px}
.mx-wrap .mx-row h3:not(.ovk-card-title){display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;font-family:var(--mx-face);font-weight:900;font-size:19px;text-transform:none;letter-spacing:-.01em;color:var(--text-primary,#e8edf3)}
.mx-swipe{display:none;margin-left:auto;font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:700;color:#a78bfa}
.mx-row h3 small{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:12.5px;color:var(--mx-muted)}
.mx-row-line{margin:2px 0 8px;font-size:13.5px;color:var(--text-secondary,#b4bfcc)}
.mx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mx-card{position:relative;display:grid;align-content:start;gap:6px;padding:8px 8px 10px;border-radius:16px;border:1px solid var(--mx-line);background:var(--mx-card);scroll-margin-top:110px}
.mx-card:target{outline:2px solid var(--accent,#4f7cff);outline-offset:2px}
.mx-card.is-picked{border-color:color-mix(in srgb,#8b5cf6 70%,var(--mx-line));box-shadow:0 0 0 1px color-mix(in srgb,#8b5cf6 55%,transparent),0 10px 30px color-mix(in srgb,#8b5cf6 18%,transparent)}
.mx-stage{display:grid;place-items:center;aspect-ratio:5/4;border-radius:12px;color:#e8edf3;background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,#8b5cf6 14%,transparent),transparent 70%),#0d1322;overflow:hidden}
.mx-stage>svg{width:66%;height:auto;max-height:86%}
.mx-lock{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 9px;border-radius:10px;background:#0d1322;color:#e8edf3}
.mx-lock svg{flex:none}
.mx-word{display:flex;align-items:baseline;min-width:0;overflow:hidden;white-space:nowrap;font-family:var(--mx-lockface);font-weight:800;font-size:17px;line-height:1.1;letter-spacing:-.01em}
.mx-word b{font-weight:800}
.mx-sep,.mx-site{background:linear-gradient(90deg,#7c9bff,#b28cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.mx-wrap[data-lock=space] .mx-sep{display:none}
.mx-wrap[data-lock=space] .mx-site{margin-left:.26em;font-weight:500;background:none;color:inherit;opacity:.8}
.mx-wrap[data-lock=stack] .mx-word{flex-direction:column;align-items:flex-start;line-height:1}
.mx-wrap[data-lock=stack] .mx-sep{display:none}
.mx-wrap[data-lock=stack] .mx-site{margin-top:.18em;font-size:.56em;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.mx-sizes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mx-sizes span{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px;border-radius:9px}
.mx-dark{background:#0d1322;color:#e8edf3}
.mx-light{background:#f4f6fb;color:#0f1419}
.mx-name{margin:0 2px;font-size:14px;line-height:1.25}
.mx-name b{font-family:var(--mx-face);font-weight:900;color:var(--accent,#4f7cff);margin-right:2px}
.mx-line{margin:0 2px;font-size:12.5px;line-height:1.35;color:var(--text-secondary,#b4bfcc)}
.mx-fine{margin-top:28px;font-size:14px;color:var(--mx-muted)}
.mx-fine a{color:var(--accent,#4f7cff)}

/* Picking: tap a card (or its corner toggle). A picked card glows and wears a tick; nothing covers the marks. */
.mx-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mx-pick{position:absolute;z-index:2;top:13px;right:13px;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1.5px solid #ffffff4d;background:#0d1322b3;color:#e8edf3;cursor:pointer;backdrop-filter:blur(4px);transition:background var(--ov-dur-2, .2s),border-color var(--ov-dur-2, .2s),transform var(--ov-dur-2, .25s) var(--ov-ease-spring, cubic-bezier(.2,1.4,.3,1))}
.mx-pick::before{content:"+";font:700 18px/1 Inter,system-ui,sans-serif}
.mx-pick::after{content:"";position:absolute;inset:-7px}
.mx-card:hover .mx-pick{border-color:#a78bfa}
.mx-pick[aria-pressed=true]{background:#8b5cf6;border-color:#c4b5fd;transform:scale(1.08)}
.mx-pick[aria-pressed=true]::before{content:"\2713";font-size:15px}
.mx-pick:focus-visible{outline:2px solid #c4b5fd;outline-offset:2px}
.mx-card.is-picked{border-color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 13%,var(--mx-card));box-shadow:0 0 0 1px #8b5cf6,0 12px 30px color-mix(in srgb,#8b5cf6 24%,transparent)}
.mx-card.is-picked .mx-stage{box-shadow:inset 0 0 0 1px color-mix(in srgb,#8b5cf6 55%,transparent)}
.mx-card.just-picked{animation:mxPicked var(--ov-dur-4, .45s) var(--ov-ease-spring, cubic-bezier(.2,1.4,.3,1))}
@keyframes mxPicked{0%,100%{scale:1}40%{scale:.96}75%{scale:1.02}}
/* Your picks, in the tally at the top: copy a link to them or clear them. */
.mx-mine{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.mx-mine b{font-family:var(--mx-face);font-weight:900;font-size:14px;overflow-wrap:anywhere}
.mx-btn{padding:5px 12px;border-radius:999px;border:0;background:#8b5cf6;color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;min-height:32px}
.mx-btn-quiet{background:transparent;color:inherit;border:1px solid var(--mx-line)}
.mx-saved{font-style:normal;font-size:12px;font-weight:700;color:#86efac;opacity:0;transition:opacity var(--ov-dur-3, .3s)}
.mx-saved.is-on{opacity:1}
.mx-share{border:0;background:transparent;font:inherit;font-weight:750;font-size:13.5px;cursor:pointer;color:inherit}
.mx-share.is-done span::after{content:" \2713"}
@media (max-width:640px){.mx-share span{display:none}.mx-pick{top:10px;right:10px}}

/* Sheet: all fifty at once, just the marks; tap one to pick it. */
.mx-wrap[data-density=sheet] .mx-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px}
.mx-wrap[data-density=sheet] .mx-card{padding:5px 5px 7px;gap:4px;border-radius:13px}
.mx-wrap[data-density=sheet] .mx-pick{top:9px;right:9px;width:24px;height:24px}
.mx-wrap[data-density=sheet] .mx-pick::before{font-size:15px}
.mx-wrap[data-density=sheet] :is(.mx-lock,.mx-sizes,.mx-line,.mb-bars,.mx-row-line){display:none}
.mx-wrap[data-density=sheet] .mx-stage{aspect-ratio:1}
.mx-wrap[data-density=sheet] .mx-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-wrap[data-density=sheet] .mx-row{margin-top:12px}

/* ── Motion ─────────────────────────────────────────────────────────────────────────────────────────────────────
   Arrival: transitions (the card rises, strokes draw along their 100-unit length, fills fade). Idle: animations,
   only while a card is on screen (is-on). Parts turn about their own middles. */
.mx-stage>svg,.mx-stage .mx-a,.mx-stage .mx-b,.mx-stage .mx-dot,.mx-stage .mx-glow{transform-box:fill-box;transform-origin:center}
.mx-wrap.mx-live .mx-card{transition:opacity var(--ov-dur-4, .5s) var(--ov-ease-out, ease) var(--d,0s),transform var(--ov-dur-4, .6s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1)) var(--d,0s),border-color var(--ov-dur-2, .2s),box-shadow var(--ov-dur-2, .2s)}
.mx-wrap.mx-live .mx-card:not(.is-in){opacity:0;transform:translateY(14px)}
.mx-wrap.mx-live .mx-stage .mx-s:not([stroke-dasharray]){stroke-dasharray:100;transition:stroke-dashoffset 1.1s var(--ov-ease-out, cubic-bezier(.45,0,.2,1)) calc(var(--d,0s) + .1s)}
.mx-wrap.mx-live .mx-card:not(.is-in) .mx-stage .mx-s:not([stroke-dasharray]){stroke-dashoffset:100}
.mx-wrap.mx-live .mx-stage .mx-f{transition:opacity var(--ov-dur-4, .8s) var(--ov-ease-out, ease) calc(var(--d,0s) + .5s)}
.mx-wrap.mx-live .mx-card:not(.is-in) .mx-stage .mx-f{opacity:0}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=breathe]{animation:mxBreathe 5s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=drift]{animation:mxDrift 9s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=rock]{animation:mxRock 6.5s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=float]{animation:mxFloat 4.6s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=nod] .mx-b{animation:mxNod 4.2s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=dot] .mx-dot{animation:mxDot 3.4s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
  .mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .mx-stage>svg[data-idle=pulse] .mx-glow{animation:mxPulse 3.6s var(--ov-ease-in-out, ease-in-out) calc(1.3s + var(--d,0s)) infinite}
@keyframes mxBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes mxDrift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(-32deg) saturate(1.15)}}
@keyframes mxRock{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-3.5deg)}70%{transform:rotate(3.5deg)}}
@keyframes mxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes mxNod{0%,60%,100%{transform:translateY(0)}72%{transform:translateY(3px)}84%{transform:translateY(-1px)}}
@keyframes mxDot{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes mxPulse{0%,100%{opacity:.4}50%{opacity:.95}}
@keyframes mxPeek{0%,100%{transform:none}34%{transform:translateX(-68px)}58%{transform:translateX(6px)}76%{transform:translateX(-16px)}}
html[data-ov-motion=off] .mx-wrap.mx-live .mx-card:not(.is-in){opacity:1;transform:none}html[data-ov-motion=off] .mx-wrap.mx-live .mx-card:not(.is-in) .mx-stage :is(.mx-s,.mx-f){stroke-dashoffset:0;opacity:1}
html[data-ov-motion=off] .mx-wrap .mx-card:not(.is-in){opacity:1!important;transform:none!important}

/* ── The menu buttons ───────────────────────────────────────────────────────────────────────────────────────────
   Drawn in currentColor with the accent (mb-a fills, mb-sa strokes); hovered, tapped or scrolled in (is-play) they
   make their move; pressed (is-open) they show they are open. */
.mb-btn{all:unset;box-sizing:border-box;position:relative;display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;cursor:pointer;color:var(--mb-c);--mb-c:#a8b3c4;--mb-hc:#eef2f8;--mb-bg:#0d1322;--mb-a:#7aa2ff}
.mb-btn:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
.mb-btn::before{content:"";position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--mb-a) 34%,transparent),transparent);opacity:0;transform:scale(.5);transition:opacity var(--ov-dur-2, .25s),transform var(--ov-dur-3, .4s) var(--ov-ease-spring, cubic-bezier(.2,1.4,.3,1));pointer-events:none}
.mb-btn:is(:hover,:focus-visible,.is-play,.is-open)::before{opacity:1;transform:none}
.mb-btn:is(:hover,:focus-visible,.is-play,.is-open){color:var(--mb-hc)}
.mb-btn svg{position:relative;display:block;overflow:visible;fill:currentColor}
.mb-btn .mb-s{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.mb-btn .mb-a{fill:var(--mb-a)}
.mb-btn .mb-s.mb-a,.mb-btn .mb-sa{fill:none;stroke:var(--mb-a)}
.mb-btn .mb-faint{opacity:.45}
.mb-btn .mb-soft{opacity:.6}
.mb-btn .mb-shine{fill:#fff;opacity:.6}
.mb-btn .mb-hole{stroke:var(--mb-bg);stroke-width:1.8}
.mb-btn .mb-p{transform-box:fill-box;transform-origin:center;transition:transform var(--ov-dur-4, .45s) var(--ov-ease-spring, cubic-bezier(.2,1.3,.3,1)),opacity var(--ov-dur-2, .25s)}
.mb-btn :is(.mb-i,.mb-x,.mb-g){transform-box:view-box;transform-origin:12px 12px;transition:transform var(--ov-dur-4, .5s) var(--ov-ease-spring, cubic-bezier(.2,1.3,.3,1)),opacity var(--ov-dur-2, .25s)}
.mb-btn .mb-x{opacity:0;transform:rotate(-90deg) scale(.4)}
.mb-btn .mb-x path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}
.mb-btn.is-open svg:not([data-own]) .mb-i{opacity:0;transform:rotate(90deg) scale(.4)}
.mb-btn.is-open .mb-x{opacity:1;transform:none}
.mb-btn svg[data-own=diamond] .mb-g{transform:rotate(45deg) scale(.8)}
.mb-btn.is-open svg[data-own=diamond] .mb-g{transform:rotate(180deg) scale(.86)}
.mb-btn.is-open svg[data-own=grid] .mb-g{transform:rotate(90deg)}
.mb-btn.is-open svg[data-own=plus] .mb-g{transform:rotate(45deg)}
.mb-btn.is-open svg[data-own=flip] .mb-g{transform:rotate(180deg)}
.mb-btn.is-open svg:is([data-own=diamond],[data-own=grid]) .mb-r1{opacity:0;transform:scale(0)}
.mb-btn.is-open svg:is([data-own=diamond],[data-own=grid]) .mb-r0{fill:currentColor}
.mb-btn.is-open svg[data-own=burger] .mb-l0{transform:translateY(5.5px) rotate(45deg)}
.mb-btn.is-open svg[data-own=burger] .mb-l1{opacity:0;transform:scaleX(0)}
.mb-btn.is-open svg[data-own=burger] .mb-l2{transform:translateY(-5.5px) rotate(-45deg)}
.mb-btn.is-open svg[data-own=burger2] .mb-l0{transform:translateY(3px) rotate(45deg)}
.mb-btn.is-open svg[data-own=burger2] .mb-l2{transform:translateY(-3px) rotate(-45deg)}
/* 2026-11-10, the buttons drawn from the logo and from the menu. A V is the top half of an ×: its two strokes are
   drawn half way (mb-h) and grow through to the other side as it opens. Two Vs slide until their points meet. Four
   petals turn an eighth. A ring of apps, and the launcher's grid with a V lit in it, drop their edge dots and
   leave an × of dots. */
.mb-btn .mb-h{stroke-dasharray:50 100;transition:stroke-dasharray var(--ov-dur-4, .45s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1)),transform var(--ov-dur-4, .45s) var(--ov-ease-spring, cubic-bezier(.2,1.3,.3,1)),opacity var(--ov-dur-2, .25s)}
.mb-btn.is-open svg:is([data-own=grow],[data-own=growdot]) .mb-h{stroke-dasharray:100 100}
.mb-btn.is-open svg[data-own=growdot] .mb-o{transform:translateY(-6.4px) scale(.84)}
.mb-btn.is-open svg[data-own=meet] .mb-u{transform:translateY(2.4px)}
.mb-btn.is-open svg[data-own=meet] .mb-d{transform:translateY(-2.4px)}
.mb-btn.is-open svg:is([data-own=gather],[data-own=vgrid]) .mb-r1{opacity:0;transform:scale(0)}
.mb-btn.is-open svg[data-own=gather] .mb-r2{transform:scale(1.75)}
.mb-btn.is-open svg[data-own=vgrid] .mb-r2{fill:var(--mb-a);opacity:1;transform:scale(1.14)}
.mb-btn .mb-c1{fill:var(--mb-c1,#22d3ee)}
.mb-btn .mb-c3{fill:var(--mb-c3,#a78bfa)}
.mb-light .mb-btn{--mb-c1:#0891b2;--mb-c3:#7c3aed}
.mb-btn .mb-orb{transform-box:view-box;transform-origin:12px 12px}
/* Pressed, a ring leaves the button (once). */
.mb-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mb-a);opacity:0;pointer-events:none}
.mb-btn.is-open::after{animation:mbBurst var(--ov-dur-4, .55s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1)) both}
@keyframes mbBurst{from{opacity:.75;transform:scale(.35)}to{opacity:0;transform:scale(1.85)}}
/* What it opens, on the stage behind the button: the menu in small (its search bar, its three tabs, your apps), grown
   out of the button. The button itself goes to the menu's top right and is its close button: the one button the whole
   way (the rule "the button that opens it closes it"). A picture, not a control. */
.mb-card .mx-stage{position:relative;overflow:hidden;container-type:size}
.mb-card .mb-big{position:relative;z-index:2;transition:transform var(--ov-dur-4, .5s) var(--ov-ease-spring, cubic-bezier(.2,1.15,.3,1))}
/* Beside the card's own + (which keeps the corner), on the search bar's line. */
.mb-card .mx-stage:has(.mb-big.is-open) .mb-big{transform:translate(calc(50cqw - 72px),calc(-50cqh + 24px)) scale(.4)}
.mb-peek{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:auto auto 1fr;gap:8px;padding:12px;box-sizing:border-box;pointer-events:none;opacity:0;
  clip-path:circle(0 at 50% 50%);transition:clip-path var(--ov-dur-4, .5s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1)),opacity var(--ov-dur-2, .25s);
  background:linear-gradient(180deg,color-mix(in srgb,#3b82f6 10%,#0d1322),#0b1020)}
.mx-stage:has(.mb-big.is-open) .mb-peek{opacity:1;clip-path:circle(150% at 50% 50%)}
.mb-peek i{display:block;opacity:0;transform:translateY(calc(8px * var(--ov-move, 1))) scale(.94);transition:opacity var(--ov-dur-3, .3s),transform var(--ov-dur-4, .45s) var(--ov-ease-spring, cubic-bezier(.2,1.2,.3,1));transition-delay:0s}
.mx-stage:has(.mb-big.is-open) .mb-peek i{opacity:1;transform:none;transition-delay:calc(90ms + var(--i, 0) * 32ms)}
.mb-peek-s{height:24px;margin-right:88px;border-radius:999px;background:color-mix(in srgb,#e8edf3 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#e8edf3 14%,transparent);position:relative}
.mb-peek-s::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-5px;border-radius:50%;border:1.6px solid #7aa2ff}
.mb-peek-t{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mb-peek-t i{height:16px;border-radius:8px;background:color-mix(in srgb,#e8edf3 8%,transparent)}
.mb-peek-t i:last-child{background:color-mix(in srgb,#3b82f6 34%,#131c2e)}
.mb-peek-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 10px;align-content:start;justify-items:center}
.mb-peek-g i{width:min(100%,34px);aspect-ratio:1;border-radius:28%;background:linear-gradient(150deg,hsl(var(--h) 72% 58% / .5),hsl(var(--h) 70% 38% / .28));box-shadow:inset 0 0 0 1px hsl(var(--h) 70% 64% / .32)}
html[data-ov-motion=off] .mb-peek,html[data-ov-motion=off] .mb-peek i{transition:none}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=ripple] .mb-p{animation:mbRipple var(--ov-dur-4, .75s) var(--ov-ease-out, cubic-bezier(.3,.7,.3,1)) calc(var(--i,0) * .08s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=wave] .mb-p{animation:mbWave var(--ov-dur-4, .7s) var(--ov-ease-in-out, ease-in-out) calc(var(--i,0) * .07s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=bloom] .mb-p{animation:mbBloom var(--ov-dur-4, .7s) var(--ov-ease-out, cubic-bezier(.3,.7,.3,1)) calc(var(--i,0) * .06s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=twinkle] .mb-p{animation:mbTwinkle var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out) calc(var(--i,0) * .12s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=slide] .mb-p{animation:mbSlide var(--ov-dur-4, .6s) var(--ov-ease-in-out, ease-in-out) calc(var(--i,0) * .07s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=fan] .mb-p{animation:mbFan var(--ov-dur-4, .8s) var(--ov-ease-out, cubic-bezier(.3,.7,.3,1))}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=bars] .mb-p{transform-origin:center bottom;animation:mbBars var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out) calc(var(--i,0) * .08s)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=draw] .mb-s{animation:mbDraw var(--ov-dur-4, .8s) var(--ov-ease-out, cubic-bezier(.45,0,.2,1)) calc(var(--i,0) * .14s) both}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=blink] .mb-k{animation:mbBlink 1s steps(1) 2}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg:is([data-anim=pop],[data-anim=pulse]) .mb-i{animation:mbPop var(--ov-dur-4, .6s) var(--ov-ease-out, cubic-bezier(.3,.7,.3,1))}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=tilt] .mb-i{animation:mbTilt var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=nod] .mb-i{animation:mbNod var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=apart] .mb-u{animation:mbApart var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out)}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=apart] .mb-d{animation:mbApart var(--ov-dur-4, .8s) var(--ov-ease-in-out, ease-in-out) reverse}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=orbit] .mb-orb{animation:mbOrbit 1.2s var(--ov-ease-in-out, cubic-bezier(.65,0,.35,1))}
  .mb-btn:not(.is-open):is(:hover,:focus-visible,.is-play) svg[data-anim=spin] .mb-g{animation:mbSpin .9s var(--ov-ease-in-out, cubic-bezier(.65,0,.35,1))}
@keyframes mbRipple{0%,100%{transform:scale(1)}35%{transform:scale(.5)}70%{transform:scale(1.2)}}
@keyframes mbWave{0%,100%{transform:translateY(0)}40%{transform:translateY(-2.6px)}}
@keyframes mbBloom{0%,100%{transform:scale(1)}45%{transform:scale(1.24)}}
@keyframes mbTwinkle{0%,100%{opacity:1;transform:scale(1)}40%{opacity:.25;transform:scale(.6)}}
@keyframes mbSlide{0%,100%{transform:translateX(0)}45%{transform:translateX(2.6px)}}
@keyframes mbFan{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--dx,0px),var(--dy,0px))}}
@keyframes mbBars{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.35)}65%{transform:scaleY(1.15)}}
@keyframes mbDraw{from{stroke-dasharray:100;stroke-dashoffset:100}to{stroke-dasharray:100;stroke-dashoffset:0}}
@keyframes mbBlink{0%{opacity:1}50%{opacity:0}}
@keyframes mbPop{0%,100%{transform:scale(1)}40%{transform:scale(.8)}75%{transform:scale(1.12)}}
@keyframes mbTilt{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
@keyframes mbNod{0%,100%{transform:translateY(0)}30%{transform:translateY(2.4px)}60%{transform:translateY(-.6px)}80%{transform:translateY(1.2px)}}
@keyframes mbApart{0%,100%{transform:translateY(0)}45%{transform:translateY(-1.6px)}}
@keyframes mbOrbit{50%{transform:rotate(200deg)}}
@keyframes mbSpin{to{transform:rotate(90deg)}}
.mb-card .mx-stage{color:#e8edf3}
.mb-big{width:auto;height:auto;padding:14px;border-radius:24px}
.mb-big::before{inset:8px}
.mb-tabbtn{pointer-events:none;width:46px;height:46px}
.mb-bars{display:grid;gap:5px}
.mb-nav{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 6px 5px 9px;border-radius:10px}
.mb-nav>svg{flex:none}
.mb-nav .mx-word{font-size:15px;flex:1}
.mb-dark{background:#0d1322;color:#e8edf3}
.mb-light{background:#f4f6fb;color:#0f1419}
.mb-light .mb-btn{--mb-c:#55627a;--mb-hc:#0f1419;--mb-bg:#f4f6fb;--mb-a:#3b6cff}
.mb-light .mx-sep,.mb-light .mx-site{background:linear-gradient(90deg,#3b6cff,#7c3aed);-webkit-background-clip:text;background-clip:text}

/* Widths. A phone gets sideways rails: a row is one swipe, not a page of cards. */
@media (max-width:1100px){.mx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.mx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mx-vs .mx-tab-t small{display:none}}
@media (max-width:640px){
  .mx-vs{gap:6px}
  .mx-vs .mx-tab{flex-direction:column;gap:6px;padding:10px 4px;text-align:center;border-radius:14px}
  .mx-vs .mx-tab-art{width:56px;height:56px;border-radius:12px}
  .mx-vs .mx-tab-art svg{width:42px;height:42px}
  .mx-vs .mx-tab-t b{font-size:16px}
  .mx-tab-t em{font-size:11px}
  .mx-tab-side .mx-tab-t small{display:block;font-size:12px}
  .mx-q{font-size:13.5px}
  .mx-q b{font-size:15.5px}
  .mx-tools{gap:4px;padding:6px 8px}
  .mx-tool{width:100%}
  .mx-tool-k{width:40px}
  .mx-row{margin-top:14px}
  .mx-wrap .mx-row h3:not(.ovk-card-title){font-size:17px}
  .mx-row-line{margin-bottom:6px;font-size:12.5px}
  /* A rail scrolls sideways only: overflow-y hidden, so a vertical swipe that starts on it moves the page (the owner,
     11-01: "you can't scroll without going outside the box"). Its right edge fades while there is more, and the first
     time it comes into view it nudges left and back (marks.js), so it reads as something to swipe. */
  .mx-wrap:not([data-density=sheet]) .mx-grid{display:grid;grid-auto-flow:column;grid-auto-columns:46%;grid-template-columns:none;gap:8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-padding-left:2px;padding:2px 2px 6px;margin:0 -2px;scrollbar-width:none}
  .mx-wrap:not([data-density=sheet]) .mx-grid::-webkit-scrollbar{display:none}
  .mx-wrap:not([data-density=sheet]) .mx-grid.has-more{-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent 99%);mask-image:linear-gradient(90deg,#000 78%,transparent 99%)}
  .mx-wrap:not([data-density=sheet]) .mx-grid.has-more.is-scrolled{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 78%,transparent 99%);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 78%,transparent 99%)}
  .mx-wrap:not([data-density=sheet]) .mx-grid.is-scrolled:not(.has-more){-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%);mask-image:linear-gradient(90deg,transparent,#000 8%)}
  .mx-wrap:not([data-density=sheet]) .mx-card{scroll-snap-align:start}
  .mx-wrap:not([data-density=sheet]) .mx-swipe{display:inline}
  .mx-wrap:not([data-density=sheet]) .mx-grid.is-peek>li{animation:mxPeek 1.15s var(--ov-ease-out, cubic-bezier(.3,.7,.3,1))}
  .mx-card{padding:6px 6px 8px;gap:5px;border-radius:14px}
  .mx-lock{padding:6px 7px;gap:6px}
  .mx-lock svg{width:20px;height:20px}
  .mx-word{font-size:14px}
  .mb-nav .mx-word{font-size:13px}
  .mx-sizes{gap:4px}
  .mx-sizes span{gap:6px;padding:5px 4px}
  .mx-name{font-size:13px}
  .mx-line{font-size:12px}
  .mx-chip,.mx-own{min-height:40px}
  .mx-wrap[data-density=sheet] .mx-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
}
.mx-panel{scroll-margin-top:calc(var(--ovnav-real-h,56px) + 64px)}
/* Two steps, numbered in the steps bar; after the first mark is picked, step 2 calls once and a nudge says where it is
   (the owner, 11-01: "they don't realise they have to scroll to the top to switch to the menu button"). */
.mx-stepn{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#8b5cf6;color:#fff;font-size:11.5px;font-weight:800}
.mx-steps .mx-steps-sep{width:auto;height:auto;background:none;color:var(--mx-muted);font-weight:800;margin:0 2px}
.mx-step.is-call{animation:mxCall 1.4s var(--ov-ease-out, cubic-bezier(.2,.9,.3,1)) 2}
@keyframes mxCall{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}40%{box-shadow:0 0 0 6px rgba(139,92,246,.45)}}
.mx-sheet{border:0;background:transparent;color:inherit;cursor:pointer;padding:3px 9px}
.mx-sheet[aria-pressed=true]{background:#8b5cf6;color:#fff}
.mx-nudge{position:fixed;left:50%;bottom:calc(16px + var(--ovnav-appbar-h,0px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:calc(100vw - 20px);padding:10px 12px;border-radius:16px;border:1px solid #8b5cf6;background:color-mix(in srgb,var(--mx-card) 95%,transparent);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(0,0,0,.4);font-size:14px;animation:mxNudgeIn var(--ov-dur-3, .4s) var(--ov-ease-spring, cubic-bezier(.2,.9,.25,1.1))}
.mx-nudge a.mx-btn{text-decoration:none;display:inline-grid;place-items:center}
@keyframes mxNudgeIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:640px){.mx-steps .mx-stepn{width:18px;height:18px;font-size:10.5px}.mx-steps .mx-steps-sep{display:none}}

/* The menu buttons beside the chosen mark; on a phone the mock bar is just the mark and the button, to compare at a
   glance (the name cut off before). Step 2 waits softly until a mark is picked. */
.mb-with{margin:6px 0 2px;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,#8b5cf6 12%,var(--mx-card));font-size:13.5px;color:var(--text-secondary,#b4bfcc)}
.mx-tab-side.is-later{opacity:.7}
.mx-tab-side.is-later .mx-tab-t em::after{content:" · after step 1";color:#c4b5fd}
.mx-step-2.is-later{opacity:.6}
@media (max-width:640px){
  .mb-nav{justify-content:space-between;padding:6px 8px}
  .mb-nav .mx-word{flex:1;min-width:0;font-size:15px}
  .mb-nav .mx-word b,.mb-nav .mx-word .mx-sep{display:none}
  .mb-nav .mx-site{color:inherit;font-weight:800}
  .mb-nav>svg{width:26px;height:26px}
  .mb-nav .mb-btn{width:38px;height:38px}
  .mb-nav .mb-btn svg{width:24px;height:24px}
}

/* Simpler and tighter (the owner, 11-01: "way too much… explain it in simple words… compact"). */
.mx-hero{gap:6px;margin-bottom:12px}
.mx-hero h1{font-size:clamp(24px,3.6vw,38px)}
.mx-lede{font-size:15px}
.mx-tally{gap:6px;padding:9px 11px}
.mx-choose{gap:6px}
.mx-q{margin-top:2px}
.mx-tab{padding:10px 12px}
.mx-tab-t small{font-size:12.5px}
.mx-stephead{display:flex;align-items:center;gap:10px;margin:6px 0 4px;padding:10px 12px;border-radius:14px;background:var(--mx-card);border:1px solid var(--mx-line)}
.mx-stephead b{display:block;font-family:var(--mx-face);font-weight:900;font-size:17px}
.mx-stephead small{display:block;font-size:13px;color:var(--text-secondary,#b4bfcc)}
.mx-stepn-lg{width:30px;height:30px;font-size:15px}
.mx-row{margin-top:12px}
.mx-next{margin-top:16px}
.mx-next a,.mx-next button{padding:11px 14px}
.mx-next-share{display:grid;gap:2px;border-radius:16px;border:1px solid #8b5cf6;background:color-mix(in srgb,#8b5cf6 14%,var(--mx-card));color:inherit;font:inherit;text-align:left;cursor:pointer}
.mx-next b{font-size:16px}
/* Step 3: the name in each face, beside the chosen logo. */
.fx-stage{aspect-ratio:auto;min-height:96px;padding:14px 10px}
.fx-lock{display:flex;align-items:center;gap:10px;min-width:0}
.fx-word{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.01em;white-space:nowrap;color:#f2f5fb}
.fx-light{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#f4f6fb;color:#0f1419;font-size:17px;overflow:hidden;white-space:nowrap}
.fx-sample{margin:0 2px;font-size:14px;color:var(--text-secondary,#b4bfcc)}
.fx-mini{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#0d1322;color:#e8edf3;font-weight:800;font-size:12px}
.fx-tabart{font-family:'OV Brand',Nunito,sans-serif;font-weight:900;font-size:20px}
.mx-tab-side .mx-tab-art .fx-tabart{color:#e8edf3}
.mx-step-3.is-later{opacity:.6}
.mx-step.is-done i::after{content:" \2713"}
@media (max-width:640px){.mx-tab-side .mx-tab-t small{display:none}.fx-word{font-size:22px}.mx-stephead{padding:8px 10px}.mx-stephead b{font-size:15.5px}}
.fx-site{background:linear-gradient(90deg,#3b6cff,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-sample{line-height:1.5;overflow-wrap:anywhere}
/* Phone: the tally's rows on one line each; the font rows wider so the whole name fits; the nudge on one line. */
@media (max-width:640px){
  .mx-tops{flex-direction:row;align-items:center;gap:8px}
  .mx-tops-k{width:64px;font-size:10px}
  .mx-tally-lead{margin-left:0}
  .mx-wrap:not([data-density=sheet]) #font .mx-grid{grid-auto-columns:80%}
  .fx-word{font-size:20px}
  .fx-light{font-size:15px}
  .fx-sample{font-size:13px}
  .mx-nudge{flex-wrap:nowrap;gap:6px;padding:8px 8px 8px 12px;font-size:13px;width:calc(100vw - 20px)}
  .mx-nudge span{flex:1;min-width:0}
  .mx-nudge .mx-btn{flex:none;padding:5px 10px}
}

/* The tally, clean: one line while empty; a labelled split bar; short rows of the top picks. */
.mx-tally{gap:8px}
.mx-tally.is-empty{padding:10px 12px}
.mx-tally-n{color:var(--text-secondary,#b4bfcc);font-size:14px}
.mx-split{position:relative;display:flex;justify-content:space-between;align-items:center;height:30px;padding:0 10px;border-radius:999px;overflow:hidden;background:#8b5cf6;color:#fff;font-size:13px;font-weight:700;isolation:isolate}
.mx-split::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--l,50%);background:#4f7cff;z-index:-1;transition:width var(--ov-dur-4, .5s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1))}
.mx-split span{display:inline-flex;align-items:center;gap:5px}
.mx-split b{font-family:var(--mx-face);font-weight:900}
.mx-split svg{filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
.mx-tops-k{width:56px}
@media (max-width:640px){.mx-tops-k{width:44px}}

/* The mock bars and the font step's word wear the font picked in step 3, if any (marks.js sets --mx-pick-font). */
.mb-nav .mx-word{font-family:var(--mx-pick-font,var(--mx-face));font-weight:var(--mx-pick-weight,800)}

/* The site's bar wears the picks while this page is open (marks.js navPreview). */
.openvibe-navbar .flame .mx-navmark{display:block;width:28px;height:28px;overflow:visible}
.openvibe-navbar .ovnav-orb .mx-navmenu{all:unset;position:relative;display:grid;place-items:center;width:24px;height:24px;color:inherit}
.openvibe-navbar .ovnav-orb .mx-navmenu svg{width:22px;height:22px}
.openvibe-navbar .mx-nav-flash{animation:mxNavFlash 1.1s var(--ov-ease-out, ease-out)}
/* The two close buttons the picked menu button becomes (the menu's own and the Dock's) wear it too, open. Their own
   drawing stays in place, unseen: the Dock measures it to start on the bar's button. */
.mx-skinned > *{grid-area:1/1}
.mx-skinned > svg{opacity:0}
.mx-skinned > .mx-navmenu{all:unset;grid-area:1/1;display:grid;place-items:center;width:24px;height:24px;color:inherit;pointer-events:none}
.mx-skinned > .mx-navmenu svg{width:22px;height:22px}
/* On this page the bar is the preview, so it stays in view (the owner, 11-10: "the nav bar will just go away… while you
   scroll… disable that on that page"). Everywhere else a phone's bar still hides as you scroll down. */
html:has(.mx-wrap) .openvibe-navbar.ovnav-hide{transform:none!important}
html:has(.mx-wrap) #navbar-mount:has(> .ovnav-hide){pointer-events:auto}
@keyframes mxNavFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,#8b5cf6 70%,transparent);border-radius:12px}60%{box-shadow:0 0 0 10px transparent;border-radius:12px}100%{box-shadow:none}}

/* The tally counts both families (a person can like both), and every vote sits in a fold under it. */
.mx-both{margin:-2px 0 0;font-size:12.5px;color:var(--mx-muted);text-align:center}
.mx-all{border-top:1px solid var(--mx-line);padding-top:6px}
.mx-all>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--text-secondary,#b4bfcc);list-style:none;display:flex;gap:6px;align-items:center}
.mx-all>summary::-webkit-details-marker{display:none}
.mx-all>summary::before{content:"\25B8";font-size:11px;transition:transform var(--ov-dur-2, .2s)}
.mx-all[open]>summary::before{transform:rotate(90deg)}
.mx-all>summary span{color:var(--mx-muted);font-weight:600}
.mx-all-row{display:flex;align-items:flex-start;gap:8px;margin-top:6px}
.mx-all-list{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
@media (max-width:640px){.mx-all-row{flex-direction:column;gap:4px}}

/* ── The Wildcards (W01–W40): a third kind of logo, any mix with the Loop and the Pair ──────────────────────────── */
.mx-vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
@media (max-width:640px){.mx-vs{gap:4px}.mx-vs .mx-or{font-size:12px}.mx-vs .mx-tab-t b{font-size:14px}.mx-vs .mx-tab-t em{font-size:10.5px}.mx-vs .mx-tab-art{width:50px;height:50px}.mx-vs .mx-tab-art svg{width:38px;height:38px}}

/* The tally's three kinds as one bar: the Loop, the Pair and the Wildcards side by side. */
.mx-split3{position:relative;display:grid;grid-template-columns:var(--l,34%) var(--p,33%) 1fr;height:30px;border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:700;color:#fff;transition:grid-template-columns var(--ov-dur-4, .5s) var(--ov-ease-out, cubic-bezier(.2,.8,.2,1))}
.mx-split3[hidden]{display:none}
.mx-s3{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;padding:0 6px;white-space:nowrap;overflow:hidden}
.mx-s3 b{font-family:var(--mx-face);font-weight:900}
.mx-s3 svg{flex:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
.mx-s3-l{background:#4f7cff}.mx-s3-p{background:#8b5cf6}.mx-s3-w{background:linear-gradient(90deg,#ec4899,#f59e0b)}
@media (max-width:420px){.mx-s3 svg{display:none}}

/* How the name attaches (lockups): beside, in a pill, underlined by the idea, in a bubble, stacked, tagged, trailed. */
.mx-wild .mx-lock{justify-content:center;min-height:44px}
.lk-pill{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:4px 12px 4px 5px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,#4f7cff 30%,transparent),color-mix(in srgb,#8b5cf6 22%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,#8b5cf6 45%,transparent)}
.lk-pill svg{background:#0b1020;border-radius:50%;padding:2px}
.lk-under{position:relative;display:inline-grid;min-width:0;padding-bottom:6px}
.lk-under .lk-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:7px;fill:none;stroke:#8b5cf6;stroke-width:2.4;stroke-linecap:round}
.mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .lk-under .lk-line path{stroke-dasharray:40 8;animation:lkRun 2.4s linear infinite}
@keyframes lkRun{to{stroke-dashoffset:-96}}
.mx-wild .mx-lock.lk-bubble{flex-wrap:nowrap}
.lk-bubble{position:relative;display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 10px;border-radius:14px 14px 14px 4px;background:linear-gradient(135deg,#4f7cff,#8b5cf6)}
.lk-bubble .mx-word{font-size:13.5px}
.lk-bubble .mx-sep{color:#fff}
.lk-bubble .mx-word,.lk-bubble .mx-site{color:#fff}
.lk-stack{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.lk-stack .mx-word{font-size:13px}
.lk-tag{display:inline-flex;align-items:flex-start;gap:1px;min-width:0}
.lk-tag svg{margin-top:-7px;margin-left:1px}
.lk-trail{display:inline-flex;align-items:center;gap:4px;min-width:0}
.lk-trail i{width:22px;height:0;border-top:2px dashed color-mix(in srgb,#8b5cf6 70%,transparent)}
.mx-wrap.mx-live:not(.mx-still) .mx-card.is-on .lk-trail svg{animation:lkTow 3.2s var(--ov-ease-in-out, ease-in-out) infinite}
@keyframes lkTow{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-2px)}}

/* The statuses: as itself (16 and 28 px), live, and with something new. */
.mx-status{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.mx-status>span{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 4px;border-radius:9px;background:#0d1322;min-height:46px}
.mx-status .st{position:relative;flex-direction:column;gap:2px}
.mx-status .st small{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--mx-muted)}
.st-live small{color:#fca5a5!important}
.st-live svg .w-k:not([fill=none]){fill:#ef4444}
.st-live svg .w-k[fill=none]{stroke:#ef4444}
.st-live svg .w-k{transform-box:fill-box;transform-origin:center;animation:stLive 1.3s var(--ov-ease-in-out, ease-in-out) infinite}
.st-live::after{content:"";position:absolute;top:6px;right:calc(50% - 20px);width:8px;height:8px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #0d1322;animation:stDot 1.3s var(--ov-ease-in-out, ease-in-out) infinite}
.st-new::after{content:"3";position:absolute;top:3px;right:calc(50% - 24px);min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:#8b5cf6;color:#fff;font:800 10px/15px var(--mx-face);text-align:center;box-shadow:0 0 0 2px #0d1322}
@keyframes stLive{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes stDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}
.mx-wrap[data-density=sheet] .mx-status{display:none}

/* Each wildcard moves by its kind of motion (data-wild-motion): only while its card is on screen, with long rests,
   and never under reduced motion. The parts that move are w-a, w-b and w-c. */
.mx-wild svg :is(.w-a,.w-b,.w-c){transform-box:fill-box;transform-origin:center}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion] :is(.w-a,.w-b,.w-c){animation-duration:3.6s;animation-iteration-count:infinite;animation-timing-function:var(--ov-ease-in-out, ease-in-out);animation-delay:calc(var(--d,0s) + var(--i,0) * .09s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=draw] .w-a{stroke-dasharray:100;animation-name:wDraw;animation-duration:3.4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=join] .w-a{animation-name:wJoinL}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=join] .w-b{animation-name:wJoinR}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=flicker] :is(.w-a,.w-b){animation-name:wFlick;animation-duration:3.2s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=flicker] .w-b{animation-delay:.35s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=tilt] .w-a{animation-name:wTilt;animation-duration:5s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=drip] .w-a{transform-origin:top;animation-name:wDrip;animation-duration:3s;animation-delay:calc(var(--i,0) * .4s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=wobble] .w-a{animation-name:wMorph;animation-duration:4.4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=shine] .w-a{animation-name:wShine;animation-duration:3.8s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=drop] .w-a{transform-origin:bottom;animation-name:wDrop}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=drop] .w-b{animation-name:wShadow}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=wave] .w-a{transform-origin:bottom center;animation-name:wCheer;animation-duration:2.6s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=pulse] :is(.w-a,.w-b){animation-name:wFlash;animation-duration:2.4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=float] .w-a{animation-name:wBob;animation-duration:3.4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=glide] .w-a{animation-name:wGlide;animation-duration:4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=rise] .w-a{animation-name:wRise;animation-duration:5s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=hop] .w-a{animation-name:wHop;animation-duration:2.4s;animation-delay:calc(var(--i,0) * .25s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=rocket] .w-a{animation-name:wBob;animation-duration:2.2s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=rocket] .w-b{transform-origin:top;animation-name:wFlame;animation-duration:var(--ov-dur-4, .5s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=cascade] .w-a{animation-name:wCascade;animation-duration:1.6s;animation-delay:calc(var(--i,0) * .2s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=press] .w-a{animation-name:wPress;animation-duration:3s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=bars] .w-a{transform-origin:bottom;animation-name:wBar;animation-duration:1.4s;animation-delay:calc(var(--i,0) * .1s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=land] .w-a{animation-name:wLand;animation-duration:3.4s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=pop] .w-a{animation-name:wPop;animation-duration:3.4s;animation-delay:calc(var(--i,0) * .045s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=twinkle] .w-a{animation-name:wTwinkle;animation-duration:2.8s;animation-delay:calc(var(--i,0) * .3s)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=blink] .w-a{animation-name:wBlink;animation-duration:4.2s}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=glitch] .w-a{animation-name:wGlitchL;animation-duration:2.8s;animation-timing-function:steps(1)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=glitch] .w-b{animation-name:wGlitchR;animation-duration:2.8s;animation-timing-function:steps(1)}
  .mx-wrap.mx-live:not(.mx-still) :is(.mx-card.is-on,.st) svg[data-wild-motion=caret] .w-a{animation-name:wCaret;animation-duration:1.1s;animation-timing-function:steps(1)}
@keyframes wBar{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.55)}60%{transform:scaleY(1.08)}}
@keyframes wRipple{0%,60%,100%{opacity:1;transform:scale(1)}25%{opacity:.2;transform:scale(1.08)}}
@keyframes wHum{0%,40%,100%{transform:rotate(0)}5%{transform:rotate(1.6deg)}10%{transform:rotate(-1.6deg)}15%{transform:rotate(1.1deg)}20%{transform:rotate(-1.1deg)}25%{transform:rotate(.5deg)}}
@keyframes wFlash{0%,35%,100%{opacity:.65}10%{opacity:1}22%{opacity:.25}}
@keyframes wDraw{0%{stroke-dashoffset:100}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes wBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wSwing{0%,60%,100%{transform:scaleX(1)}20%,40%{transform:scaleX(.45)}}
@keyframes wGlow{0%,60%,100%{opacity:.35}20%,40%{opacity:.8}}
@keyframes wTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@keyframes wRise{0%{transform:translateY(18px)}40%,80%{transform:translateY(0)}100%{transform:translateY(18px)}}
@keyframes wShimmer{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wGlide{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(5px,-4px) rotate(-3deg)}70%{transform:translate(2px,-1px) rotate(1deg)}}
@keyframes wMorph{0%,100%{transform:scale(1,1)}25%{transform:scale(1.04,.96)}50%{transform:scale(.97,1.03)}75%{transform:scale(1.02,.98)}}
@keyframes wBlink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes wLook{0%,20%,100%{transform:translateX(0)}30%,45%{transform:translateX(-9px)}55%,70%{transform:translateX(9px)}}
@keyframes wTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}40%{transform:scale(.7) rotate(20deg);opacity:.6}60%{transform:scale(1.1) rotate(0)}}
@keyframes wMeetL{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
@keyframes wMeetR{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes wPop{0%,70%,100%{transform:scale(1);opacity:1}8%{transform:scale(.2);opacity:0}16%{transform:scale(1.15);opacity:1}}
@keyframes wSway{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}70%{transform:rotate(3deg)}}
@keyframes wCaret{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wOpenL{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes wOpenR{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@keyframes wShine{0%,55%{transform:skewX(-20deg) translateX(0)}85%,100%{transform:skewX(-20deg) translateX(170px)}}
@keyframes wRoll{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
@keyframes wSpray{0%,100%{opacity:0;transform:translateY(4px)}40%,60%{opacity:1;transform:translateY(0)}}
@keyframes wFlicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.97,1.04) skewX(2deg)}50%{transform:scale(1.02,.97) skewX(-2deg)}75%{transform:scale(.99,1.03) skewX(1deg)}}
@keyframes wZap{0%,30%,40%,100%{opacity:1}33%,38%{opacity:.25}}
@keyframes wBeat{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@keyframes wPress{0%,40%,100%{transform:scale(1)}10%{transform:scale(.85)}20%{transform:scale(1.06)}}
@keyframes wRing{0%,10%{transform:scale(1);opacity:0}15%{opacity:.9}45%,100%{transform:scale(1.25);opacity:0}}
@keyframes wRoll90{0%,60%{transform:rotate(0)}75%,100%{transform:rotate(90deg)}}
@keyframes wDrop{0%,50%,100%{transform:translateY(0)}20%{transform:translateY(-9px)}35%{transform:translateY(0) scale(1.03,.96)}}
@keyframes wShadow{0%,50%,100%{transform:scale(1);opacity:.3}20%{transform:scale(.6);opacity:.15}}
@keyframes wHeart{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.1)}20%{transform:scale(.97)}30%{transform:scale(1.06)}}
@keyframes wCascade{0%,100%{opacity:.35}30%{opacity:1}}
@keyframes wLoop{to{stroke-dashoffset:-100}}
@keyframes wFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
@keyframes wHop{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

@keyframes wClick{0%,40%,100%{transform:scale(1)}10%{transform:scale(.88)}20%{transform:scale(1)}}
@keyframes wJoinL{0%,100%{transform:translateX(0)}20%,45%{transform:translateX(-4px)}}
@keyframes wJoinR{0%,100%{transform:translateX(0)}20%,45%{transform:translateX(4px)}}
@keyframes wFlick{0%,100%{opacity:1}4%{opacity:.25}7%{opacity:1}10%{opacity:.5}13%{opacity:1}}
@keyframes wDrip{0%,30%{transform:scaleY(.2);opacity:0}45%{opacity:1}75%,100%{transform:scaleY(1);opacity:1}}
@keyframes wCheer{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(0)}}
@keyframes wFlame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.75)}}
@keyframes wLand{0%{transform:translate(14px,-14px);opacity:0}25%,85%{transform:none;opacity:1}100%{transform:none;opacity:1}}
@keyframes wGlitchL{0%,100%{transform:translate(-3px,0)}8%{transform:translate(-6px,1px)}10%{transform:translate(-1px,-1px)}12%{transform:translate(-3px,0)}}
@keyframes wGlitchR{0%,100%{transform:translate(3px,0)}8%{transform:translate(6px,-1px)}10%{transform:translate(1px,1px)}12%{transform:translate(3px,0)}}