/* ===== Tokens ===== */
:root{
  --font:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.8,.18,1);
  --in-ease:cubic-bezier(.16,1,.3,1);
  --turn:760ms;
  --cw:min(600px,44vw); --ch:calc(var(--cw) * .84);
  --padL:clamp(32px,6.4vw,92px);
  /* type: Inter Display (opsz 32 on the name) */
  --n-fs:clamp(38px,3.45vw,50px); --s-fs:clamp(17px,1.32vw,19px); --d-fs:clamp(14.5px,1.04vw,15px);
  --g-ns:14px; --g-sd:30px; --g-dc:32px;
}
/* takeovers: the page follows the card in front */
[data-theme=citario]  { --bg:#ebeae7; --ink:#0a0a09; --mute:#605e59; --line:#d3d1cb; --focus:#0a0a09; --sf:#b7332a; --sf-h:#a82f27; --sf-rest-line:transparent; }
[data-theme=ourli]    { --bg:#f4f2ec; --ink:#121212; --mute:#5e5b55; --line:#d9d5ca; --focus:#121212; --sf:#be352c; --sf-h:#b03128; --sf-rest-line:transparent; }
[data-theme=mecanique]{ --bg:#000000; --ink:#e4eaee; --mute:#b3bcc2; --line:#2a2d30; --focus:#e4eaee; --sf:#db4c33; --sf-h:#dd5840; --sf-rest-line:transparent; }
[data-theme=kofa]     { --bg:#e3e2df; --ink:#1b1b1a; --mute:#595854; --line:#cbc9c4; --focus:#1b1b1a; --sf:#b9342b; --sf-h:#ab3027; --sf-rest-line:rgba(185,52,43,.4); }

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:400 15px/1.5 var(--font);color:var(--ink);background:transparent;transition:color var(--turn) var(--ease);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Focus: one ring, keyboard only, following each control's own radius ===== */
:focus{outline:none}
html :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.left :focus-visible,.rail :focus-visible,.topbar :focus-visible{position:relative;z-index:96}   /* above the fog canvas */
.card:has(:focus-visible){z-index:96!important}

/* ===== Takeover layers (crossfade with the turn) ===== */
.takeover{position:fixed;inset:0;z-index:-1;pointer-events:none}
.takeover i{position:absolute;inset:0;opacity:0;transition:opacity var(--turn) var(--ease)}
.tk-citario{background:#ebeae7}
.tk-ourli{background:radial-gradient(rgba(18,18,18,.13) 1.5px,transparent 1.5px) 0 0/20px 20px,#f4f2ec}
.tk-mecanique{background:#000}
.tk-kofa{background:#e3e2df}
[data-theme=citario] .tk-citario,[data-theme=ourli] .tk-ourli,[data-theme=mecanique] .tk-mecanique,[data-theme=kofa] .tk-kofa{opacity:1}

/* ===== Layout ===== */
.home{position:fixed;inset:0;display:grid;grid-template-columns:minmax(360px,1fr) minmax(0,1.25fr) 120px;align-items:center}

/* ===== Left column: name · subtitle · description · controls · Experience ===== */
.left{position:relative;align-self:stretch;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;display:flex;flex-direction:column;padding:32px 28px 24px var(--padL)}
.left::-webkit-scrollbar{display:none}
.pb{flex:none;max-width:470px;display:flex;flex-direction:column}   /* top margin set by placePb(): optically centred */
.name{margin:0;font:500 var(--n-fs)/.98 var(--font);letter-spacing:-.05em;font-variation-settings:'opsz' 32;color:var(--ink)}
.sub{margin:var(--g-ns) 0 0;font:400 var(--s-fs)/1.35 var(--font);letter-spacing:-.018em;color:var(--ink);position:relative;z-index:0}
.sub .nw{white-space:nowrap}
.ab{margin:var(--g-sd) 0 0;max-width:31em;font:400 var(--d-fs)/1.6 var(--font);letter-spacing:-.004em;color:var(--mute);text-wrap:pretty}
.acts{margin-top:var(--g-dc);display:flex;flex-wrap:wrap;align-items:center;gap:6px}

/* Experience: unfolds below the controls; the text above never moves */
.xpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 440ms var(--ease)}
.xpanel.open{grid-template-rows:1fr}
.xpin{min-height:0;overflow:hidden}
.xp{list-style:none;margin:0;padding:14px 0 0;opacity:0;transition:opacity 220ms var(--ease)}
.xpanel.open .xp{opacity:1;transition-delay:120ms}
.xp li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 14px;padding:9px 0;border-top:1px solid var(--line)}
.xp li:last-child{border-bottom:1px solid var(--line)}
.xp .co{font:500 15px/1.35 var(--font)}
.xp .yr{font:400 12.5px/1.35 var(--font);color:var(--mute);font-variant-numeric:tabular-nums}
.xp .ro{grid-column:1/-1;font:400 13.5px/1.35 var(--font);color:var(--mute)}
.xp .ln{grid-column:1/-1;margin:2px 0 0;font:400 13.5px/1.45 var(--font);color:var(--mute)}
.xp .ln a{color:var(--ink);text-underline-offset:3px;display:inline-block;padding:6px 0;margin:-6px 0}

/* Controls: Experience · Résumé · Email (pills) */
.gl{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms ease-out}
.gl .pv{transform-origin:8px 8px;transition:transform 220ms var(--ease)}
[aria-expanded=true] .gl .pv{transform:scaleY(0)}
.c2{all:unset;box-sizing:border-box;cursor:pointer;height:44px;min-width:44px;padding:0 15px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:500 13.5px/1 var(--font);letter-spacing:-.006em;background:rgba(255,255,255,.82);color:#141414;box-shadow:0 0 0 1px rgba(0,0,0,.06);white-space:nowrap;
  transition:background-color 180ms ease-out,box-shadow 180ms ease-out,translate 180ms ease-out}
.c2.dark{background:#141414;color:#fff;box-shadow:none}
.c2.round{width:44px;padding:0}
.c2:hover{background:#fff}
.c2.dark:hover{background:#000}
[data-theme=mecanique] .c2{background:rgba(255,255,255,.12);color:#e4eaee;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
[data-theme=mecanique] .c2:hover{background:rgba(255,255,255,.2)}
[data-theme=mecanique] .c2.dark{background:#e4eaee;color:#000;box-shadow:none}
[data-theme=mecanique] .c2.dark:hover{background:#fff}
/* hover / keyboard focus: lift 1.5px, deeper shadow, the glyph nudges */
.c2:hover,.c2:focus-visible{translate:0 -1.5px;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 6px 14px -6px rgba(20,16,10,.32)}
.c2.dark:hover,.c2.dark:focus-visible{box-shadow:0 6px 14px -5px rgba(20,16,10,.45)}
[data-theme=mecanique] .c2:hover,[data-theme=mecanique] .c2:focus-visible{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 6px 16px -6px rgba(0,0,0,.9)}
.c2[aria-expanded=false]:hover .gl,.c2[aria-expanded=false]:focus-visible .gl{transform:rotate(90deg)}
#cvp:hover .gl,#cvp:focus-visible .gl{transform:translateY(2px)}
#mail:hover .gl,#mail:focus-visible .gl{transform:rotate(-9deg)}

/* "San Francisco": the fog trigger, Golden Gate red per takeover; underline on hover/focus (Kofa: hairline at rest) */
.sf{all:unset;color:inherit;border-radius:4px;position:relative}
[data-fog=on] .sf{cursor:pointer;color:var(--sf);text-decoration:underline solid;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--sf-rest-line);
  transition:color var(--turn) var(--ease),text-decoration-color var(--turn) var(--ease)}
[data-fog=on] .sf:hover,[data-fog=on] .sf:focus-visible{color:var(--sf-h);text-decoration-color:currentColor;text-decoration-thickness:1.5px;transition-duration:180ms}

/* ===== Fog canvas (assets/fog.js places and sizes it) ===== */
.fog-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden;z-index:9}
.fogging .fog-c{visibility:visible}

/* ===== The drum ===== */
.stage{position:relative;height:100vh;touch-action:none;user-select:none}
.drum{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--ch);margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2)}
.card{position:absolute;inset:0;display:block;border-radius:34px;overflow:hidden;color:var(--c-ink);
  transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;container:card/inline-size;
  transition:transform var(--turn) var(--ease),opacity var(--turn) var(--ease),translate 260ms var(--ease),box-shadow 260ms var(--ease)}
.card::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--shade,0);transition:opacity var(--turn) var(--ease);pointer-events:none;z-index:5}
.card:not(.is-current){cursor:pointer}
[data-theme=mecanique] .card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* card fields */
.f-citario{--c-ink:#0a0a09;background:#ebeae7;box-shadow:inset 0 0 0 1px rgba(10,10,9,.07)}
.f-ourli{--c-ink:#121212;background:radial-gradient(#12121221 1px,transparent 1.4px) 0 0/16px 16px,#f4f2ec;box-shadow:inset 0 0 0 1px rgba(10,10,9,.07)}
.f-mecanique{--c-ink:#fff;background:#0b0b0b}
.f-kofa{--c-ink:#45433e;background:linear-gradient(180deg,#f1efea,#e6e3dc)}
/* the front hero card is one link to the live site (new tab) */
.cl{position:absolute;inset:0;display:block;color:inherit;text-decoration:none;border-radius:inherit}
.cl:focus-visible{outline:none}   /* the ring is drawn on the card */
.card.is-current:has(.cl:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.card.is-current.can-open{cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.02),0 22px 50px -34px rgba(30,25,15,.32)}
.card.is-current.can-open:hover,.card.is-current.can-open:has(.cl:focus-visible){translate:0 -3px;box-shadow:0 2px 0 rgba(0,0,0,.02),0 34px 64px -30px rgba(30,25,15,.46)}
[data-theme=mecanique] .card.is-current.can-open:hover,[data-theme=mecanique] .card.is-current.can-open:has(.cl:focus-visible){box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cap{position:absolute;left:28px;right:28px;bottom:0;height:72px;overflow:hidden;display:flex;align-items:center;gap:12px;font:500 17px/1.2 var(--font);letter-spacing:-.01em;z-index:2;white-space:nowrap}
.cap span{font-weight:400;opacity:.72;overflow:hidden;text-overflow:ellipsis;min-width:0}
.f-mecanique .cap span{opacity:.82}
.f-kofa .cap span{opacity:.88}
.cap .go{flex:none;font-style:normal;font-weight:400;opacity:0;transform:translate(-4px,2px);transition:opacity 220ms var(--ease),transform 260ms var(--ease)}
.card.is-current.can-open:hover .go,.card.is-current:has(.cl:focus-visible) .go{opacity:.8;transform:none}

/* hero faces: still images; the living layer shows only on the front card */
.art{position:absolute;inset:0 0 72px 0;z-index:1;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.live{position:absolute;inset:0;display:none}
.card.is-current .live{display:block}
.live img{position:absolute;display:block}
/* Ourli: ourli.com's layers; each loose piece bobs as on the site (−6px at 1200 → −0.5cqw; 2.4s steps(3) alternate) */
.our-live .bg{inset:0;width:100%;height:100%}
.our-live .lp{animation:our-bob 2.4s steps(3,jump-none) infinite alternate}
@keyframes our-bob{to{translate:0 -.5cqw}}
@container card (max-width:440px){ .our-live .lp{animation-name:our-bob-m} }
@keyframes our-bob-m{to{translate:0 -1.54cqw}}
/* Mecanique: the site's own CRT frames, crossfading every 4.75s (JS), with a faint CRT flicker */
.mec-live .mf{inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 900ms ease-in-out}
.mec-live .mf.on{opacity:1}
.mec-live::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;animation:crt-flicker 2.3s steps(1,end) infinite}
@keyframes crt-flicker{0%{opacity:0}11%{opacity:.035}19%{opacity:.01}37%{opacity:.045}46%{opacity:0}63%{opacity:.025}71%{opacity:.05}83%{opacity:.012}}
.drum.turning .live,.drum.turning .live *,.tab-hidden .live,.tab-hidden .live *{animation-play-state:paused!important}

/* Kofa: the card is taped shut with two crossed strips of IN PROGRESS tape (an X running off the edges, folded round), and a Peek */
.kz{position:absolute;inset:0 0 72px 0;z-index:2;overflow:hidden}
.kz-x{position:absolute;inset:0}
.kz-tape{position:absolute;left:var(--tl);width:var(--tw);top:var(--ty);height:8.4cqw;margin-top:-4.2cqw;transform:rotate(var(--r));transform-origin:50% 50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%,rgba(90,76,16,.06)),
    linear-gradient(90deg,#b9a347 0,#d3bc5a 2.6cqw,#e9d36a 4.4cqw,#e9d36a calc(100% - 4.4cqw),#d3bc5a calc(100% - 2.6cqw),#b9a347 100%);
  box-shadow:0 .35cqw .9cqw rgba(70,58,12,.18),0 .1cqw .15cqw rgba(70,58,12,.12)}
.kz-tape span{font:500 2.2cqw/1 var(--mono);letter-spacing:.2em;color:#5a4c10}
.kz-a{--r:21deg}
.kz-b{--r:-21deg}
.kz-x{--tl:-6.5cqw;--tw:113cqw;--ty:31cqw}
.kz-act{position:absolute;left:0;right:0;top:calc(var(--ty-act,64%));display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.kz-peek{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;min-width:44px;padding:0 20px;border-radius:99px;display:inline-flex;align-items:center;
  font:500 14px/1 var(--font);color:#1b1b1a;background:#fff;box-shadow:0 0 0 1px #7d7a73,0 1px 2px rgba(0,0,0,.05);transition:box-shadow 160ms}
.kz-peek:hover{box-shadow:0 0 0 1px #4d4b46,0 1px 2px rgba(0,0,0,.05)}
.kz-msg{margin:0;min-height:1.4em;font:400 13px/1.4 var(--mono);color:#54524c;opacity:0;transition:opacity 200ms}
.kz.refused .kz-msg{opacity:1}
.kz.refusing .kz-tape{animation:kz-tug 620ms cubic-bezier(.3,1.6,.5,1)}
.kz.refusing .kz-b{animation-delay:60ms}
.card.refusing{animation:kz-shake 420ms ease-out}
@keyframes kz-tug{0%,100%{transform:rotate(var(--r))}30%{transform:translateY(-1.4cqw) rotate(calc(var(--r) * 1.07))}65%{transform:translateY(.35cqw) rotate(var(--r))}}
@keyframes kz-shake{0%,100%{translate:0}20%{translate:-.6cqw}45%{translate:.55cqw}70%{translate:-.3cqw}88%{translate:.15cqw}}
@container card (max-width:440px){
  .kz-x{--tl:-15.5cqw;--tw:131cqw;--ty:46cqw}
  .kz-a{--r:36deg} .kz-b{--r:-36deg}
  .kz-tape{height:11.5cqw;margin-top:-5.75cqw}
  .kz-tape span{font-size:3.1cqw}
  .kz-act{--ty-act:68%;gap:2.6cqw}
}

/* ===== Rail: dots ===== */
.rail{justify-self:center;display:flex;flex-direction:column;align-items:center}
.dots{display:flex;flex-direction:column;align-items:center}
.dot{width:44px;height:44px;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink);padding:0}
.dot i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.22;transition:opacity 300ms,transform 300ms var(--ease)}
.dot[aria-current=true] i{opacity:1;transform:scale(1.25)}
.dot:hover i{opacity:.6}
.dot:focus-visible{outline-offset:-11px}   /* a 22px circle around the dot */
.topbar{display:none}

/* ===== Load entrance: every load (never on turns); CSS only, from visible-but-offset states ===== */
@keyframes in-rise{from{opacity:.15;translate:0 12px}}
@keyframes in-front{from{opacity:.25;translate:0 16px}}
@keyframes in-slat{from{opacity:0;translate:0 var(--from,0px)}}
@keyframes in-fade{from{opacity:0}}
.intro .name{animation:in-rise 900ms var(--in-ease) backwards}
.intro .sub{animation:in-rise 950ms 110ms var(--in-ease) backwards}
.intro .ab{animation:in-rise 1000ms 220ms var(--in-ease) backwards}
.intro .acts{animation:in-rise 1000ms 330ms var(--in-ease) backwards}
.intro .card[data-d="0"]{animation:in-front 1100ms 160ms var(--in-ease) backwards}
.intro .card[data-d="-1"]{--from:58px;animation:in-slat 1250ms 320ms var(--in-ease) backwards}
.intro .card[data-d="1"]{--from:-58px;animation:in-slat 1250ms 320ms var(--in-ease) backwards}
.intro .card[data-d="-2"]{--from:88px;animation:in-slat 1250ms 420ms var(--in-ease) backwards}
.intro .card[data-d="2"]{--from:-88px;animation:in-slat 1250ms 420ms var(--in-ease) backwards}
.intro .card[data-d="-3"]{--from:106px;animation:in-slat 1250ms 500ms var(--in-ease) backwards}
.intro .card[data-d="3"]{--from:-106px;animation:in-slat 1250ms 500ms var(--in-ease) backwards}
.intro .rail,.intro .topbar{animation:in-fade 800ms 900ms ease-out backwards}

/* ===== ≤760px (390): the drum first, then the About ===== */
@media (max-width:760px){
  :root{--cw:calc(100vw - 48px);--ch:calc(var(--cw) * 1.42);--n-fs:36px;--s-fs:17px;--d-fs:15px;--g-sd:22px;--g-dc:28px}
  body{overflow:auto}
  .home{position:static;display:flex;flex-direction:column;align-items:stretch}
  .stage{order:0;height:max(600px,86svh);touch-action:pan-y}
  .card{touch-action:pan-y}
  .card.is-current{touch-action:none}
  .drum{top:calc(50% + 10px)}
  .topbar{display:flex;position:absolute;left:0;right:0;top:0;z-index:20;justify-content:space-between;align-items:center;padding:6px 10px 14px 20px;background:linear-gradient(var(--bg) 62%,transparent);transition:background var(--turn)}
  .topbar .nm{margin:0;font:500 14px/1.3 var(--font);white-space:nowrap}
  .topbar a{min-height:44px;display:inline-flex;align-items:center;padding:0 10px;font:500 14px/1 var(--font);text-decoration:none;gap:6px}
  .rail{position:absolute;right:-10px;top:max(300px,43svh);transform:translateY(-50%);z-index:12}
  .left{order:1;overflow:visible;padding:44px 24px 64px}
  .cap{left:22px;right:22px;height:64px;font-size:16px;gap:10px}
  .art,.kz{bottom:64px}
}

/* ===== Reduced motion: same states, no movement ===== */
@media (prefers-reduced-motion: reduce){
  :root{--turn:0ms}
  .card{transition:opacity 180ms linear}
  body,.takeover i,.xpanel,.xp,.gl,.gl .pv,.c2,.cap .go,.sf,.kz-msg{transition:none!important}
  .intro *,.intro .card,.kz.refusing .kz-tape,.card.refusing{animation:none!important}
  .card.is-current.can-open:hover,.card.is-current.can-open:has(.cl:focus-visible),.c2:hover,.c2:focus-visible{translate:none}
  .c2:hover .gl,.c2:focus-visible .gl{transform:none!important}
  .fog-c,.live{display:none!important}
}

/* Initial markup uses the same rounded-height projection as tf(), before JS. */
.drum{
  --gh:round(nearest,var(--ch),1px);
  --ph1:calc(var(--gh) * .9 / 2 * cos(79deg) * (1300px / (1300px - var(--gh) * .9 / 2 * sin(79deg)) + 1300px / (1300px + var(--gh) * .9 / 2 * sin(79deg))));
  --ph2:calc(var(--gh) * .82 / 2 * cos(85.5deg) * (1300px / (1300px - var(--gh) * .82 / 2 * sin(85.5deg)) + 1300px / (1300px + var(--gh) * .82 / 2 * sin(85.5deg))));
  --ph3:calc(var(--gh) * .76 / 2 * cos(88deg) * (1300px / (1300px - var(--gh) * .76 / 2 * sin(88deg)) + 1300px / (1300px + var(--gh) * .76 / 2 * sin(88deg))));
  --y1:calc(var(--gh) / 2 + 22px + var(--ph1) / 2);
  --y2:calc(var(--gh) / 2 + 22px + var(--ph1) + 9px + var(--ph2) / 2);
  --y3:calc(var(--gh) / 2 + 22px + var(--ph1) + 9px + var(--ph2) + 7px + var(--ph3) / 2);
}
.card{opacity:0;pointer-events:none;transform:translate3d(0,calc(var(--dir,1) * var(--y,0px)),0) perspective(1300px) rotateX(calc(var(--dir,1) * var(--angle,0deg))) scale(var(--scale,1));z-index:var(--z,10)}
.card[data-d="0"]{opacity:1;pointer-events:auto;--y:0px;--angle:0deg;--scale:1;--shade:0;--z:10}
.card[data-d="1"],.card[data-d="-1"]{opacity:1;pointer-events:auto;--y:var(--y1);--angle:79deg;--scale:.9;--shade:.05;--z:9}
.card[data-d="2"],.card[data-d="-2"]{opacity:1;pointer-events:auto;--y:var(--y2);--angle:85.5deg;--scale:.82;--shade:.12;--z:8}
.card[data-d="3"],.card[data-d="-3"]{opacity:1;--y:var(--y3);--angle:88deg;--scale:.76;--shade:.18;--z:7}
.card[data-d^="-"]{--dir:-1}
@media (max-width:760px){.card[data-d="2"],.card[data-d="-2"],.card[data-d="3"],.card[data-d="-3"]{opacity:0;pointer-events:none}}

/* CSS centres the text before the optional font/resize refinement. */
@media (min-width:761px){
  .left:not(.placed){padding-bottom:calc(32px + 6vh)}
  .left:not(.placed) .pb{margin-block:auto}
}

/* Invisible hit-area corrections; visible artwork and rings retain v20 positions. */
.xp .ln a{position:relative}
.xp .ln a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}
.dot{position:relative}
@media (max-width:760px){.dot::after{content:"";position:absolute;left:-10px;top:0;width:44px;height:44px}}

/* Raise containing stacking contexts too, so focus stays above the mobile fog. */
.sub:has(:focus-visible),.rail:has(:focus-visible),.topbar:has(:focus-visible){z-index:96}
.drum.turning .mec-live::after,.tab-hidden .mec-live::after{animation-play-state:paused!important}


@media (prefers-reduced-motion:reduce){.kz-peek{transition:none!important}}