/* fx.css — Awwwards-lagret ovanpå kupolen-scrub.
   Fyra grenar, fem varianter var, live-switchbara. Rör inte main.js / styles.css.
   Fonter: Panchang (display) + Supreme (text) — Fontshare, self-hostade, anti-generiska. */

@font-face{font-family:Panchang;src:url("fonts/panchang-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Panchang;src:url("fonts/panchang-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Panchang;src:url("fonts/panchang-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Supreme;src:url("fonts/supreme-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Supreme;src:url("fonts/supreme-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{ --fx-mono:"SF Mono",ui-monospace,"Roboto Mono",monospace; }

/* ══════════════════════════════════════════════════════════════════
   CURSOR — göm systemcursorn bara när en variant är aktiv + fin pekare
   ══════════════════════════════════════════════════════════════════ */
html.fx-cursor-on, html.fx-cursor-on *{cursor:none !important}
html.fx-cursor-on .fx-panel, html.fx-cursor-on .fx-panel *{cursor:auto !important}
#fx-cursor{position:fixed;inset:0;z-index:9998;pointer-events:none;contain:strict}
#fx-cursor.fx-hide-cursor{opacity:0}
#fx-cursor *{position:absolute;top:0;left:0;will-change:transform}

/* — reticle — */
#fx-cursor.reticle .fx-ret-frame{width:52px;height:52px;margin:-26px 0 0 -26px;
  transform:translate(var(--sx),var(--sy));transition:width .25s cubic-bezier(.2,.9,.2,1),height .25s cubic-bezier(.2,.9,.2,1),opacity .3s}
#fx-cursor.reticle .fx-ret-frame span{position:absolute;width:11px;height:11px;border:1.5px solid var(--teal)}
#fx-cursor.reticle .fx-ret-frame span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
#fx-cursor.reticle .fx-ret-frame span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
#fx-cursor.reticle .fx-ret-frame span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
#fx-cursor.reticle .fx-ret-frame span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
#fx-cursor.reticle .fx-ret-cross{width:2px;height:2px;margin:-1px 0 0 -1px;transform:translate(var(--x),var(--y))}
#fx-cursor.reticle .fx-ret-cross::before,#fx-cursor.reticle .fx-ret-cross::after{content:"";position:absolute;background:var(--teal)}
#fx-cursor.reticle .fx-ret-cross::before{width:1px;height:9px;left:0;top:-4px}
#fx-cursor.reticle .fx-ret-cross::after{height:1px;width:9px;top:0;left:-4px}
#fx-cursor.reticle .fx-ret-ring{width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  border:1px dashed rgba(79,227,212,.25);transform:translate(var(--sx),var(--sy)) rotate(var(--spin));opacity:.7}
#fx-cursor.reticle .fx-ret-label{transform:translate(var(--sx),var(--sy));margin:34px 0 0 0;
  font:600 8px/1 var(--fx-mono);letter-spacing:.28em;color:var(--teal);text-align:center;width:80px;left:-40px;opacity:.55}
#fx-cursor.reticle.lock .fx-ret-frame{width:30px;height:30px;filter:drop-shadow(0 0 6px var(--teal))}
#fx-cursor.reticle.lock .fx-ret-ring{border-color:rgba(79,227,212,.5)}

/* — orbital — */
#fx-cursor.orbital .fx-orb-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid rgba(79,227,212,.7);transform:translate(var(--sx),var(--sy));transition:width .3s,height .3s,margin .3s}
#fx-cursor.orbital .fx-orb-sat{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 8px var(--teal);transform:translate(var(--sx),var(--sy)) rotate(var(--spin)) translateX(22px)}
#fx-cursor.orbital .fx-orb-core{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff;
  transform:translate(var(--x),var(--y))}
#fx-cursor.orbital.lock .fx-orb-ring{width:14px;height:14px;margin:-7px 0 0 -7px}

/* — aperture — */
#fx-cursor.aperture .fx-ap{width:0;height:0;transform:translate(var(--sx),var(--sy))}
#fx-cursor.aperture .fx-ap-blade{width:16px;height:16px;margin:-8px 0 0 -8px;
  border-top:12px solid rgba(79,227,212,.6);border-left:9px solid transparent;border-right:9px solid transparent;
  transform-origin:50% 0;transform:rotate(var(--a)) translateY(var(--ap-open,-14px));transition:transform .3s cubic-bezier(.3,.8,.2,1)}
#fx-cursor.aperture .fx-ap-core{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--teal);
  transform:translate(var(--x),var(--y))}
#fx-cursor.aperture.lock .fx-ap{--ap-open:-4px}

/* — telemetry cursor — */
#fx-cursor.telemetry .fx-tel-cross{width:18px;height:18px;margin:-9px 0 0 -9px;transform:translate(var(--x),var(--y))}
#fx-cursor.telemetry .fx-tel-cross::before,#fx-cursor.telemetry .fx-tel-cross::after{content:"";position:absolute;background:var(--teal)}
#fx-cursor.telemetry .fx-tel-cross::before{width:1px;height:18px;left:9px;top:0}
#fx-cursor.telemetry .fx-tel-cross::after{height:1px;width:18px;top:9px;left:0}
#fx-cursor.telemetry .fx-tel-read{transform:translate(var(--sx),var(--sy));margin:14px 0 0 14px;
  font:500 9px/1.5 var(--fx-mono);letter-spacing:.06em;color:var(--teal);white-space:pre;
  padding:5px 7px;border:1px solid rgba(79,227,212,.3);background:rgba(5,10,12,.55);backdrop-filter:blur(4px);border-radius:3px;opacity:.85}
#fx-cursor.telemetry.lock .fx-tel-read{border-color:var(--teal);color:#fff}

/* — magnet — */
#fx-cursor.magnet .fx-mag-halo{width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,227,212,.9),rgba(79,227,212,0) 70%);mix-blend-mode:difference;
  transform:translate(var(--sx),var(--sy));transition:width .3s,height .3s,margin .3s}
#fx-cursor.magnet .fx-mag-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 10px var(--teal);transform:translate(var(--x),var(--y))}
#fx-cursor.magnet.lock .fx-mag-halo{width:120px;height:120px;margin:-60px 0 0 -60px}

/* — morph (MorphSVG-form som byter vid hover) — */
#fx-cursor.morph .fx-mo{width:40px;height:40px;margin:-20px 0 0 -20px;overflow:visible;transform:translate(var(--sx),var(--sy))}
#fx-cursor.morph .fx-mo-p{fill:none;stroke:var(--teal);stroke-width:2;filter:drop-shadow(0 0 4px rgba(79,227,212,.5))}
#fx-cursor.morph .fx-mo-core{width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:var(--teal);transform:translate(var(--x),var(--y))}

/* — GSAP-textvarianter: markör + word-cycle — */
.fx-caret{color:var(--teal);animation:fxblink 1s steps(1) infinite;margin-left:.02em}
@keyframes fxblink{50%{opacity:0}}
.fx-cyc{display:inline-block}
.fx-gsl{will-change:transform}

/* ── trail / mus-svans ── */
#fx-trail{position:fixed;inset:0;z-index:3;pointer-events:none}
#fx-spot{position:fixed;top:0;left:0;width:760px;height:760px;margin:-380px 0 0 -380px;z-index:8;pointer-events:none;
  transform:translate(var(--lx,50vw),var(--ly,50vh));mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(79,227,212,.20),rgba(79,227,212,.07) 32%,transparent 62%)}

/* ── avslöja: dold text/lager som bara syns i muscirkeln ── */
#fx-reveal{position:fixed;inset:0;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle var(--rev-r,250px) at var(--lx,50vw) var(--ly,50vh),#000 0%,#000 36%,transparent 74%);
  mask-image:radial-gradient(circle var(--rev-r,250px) at var(--lx,50vw) var(--ly,50vh),#000 0%,#000 36%,transparent 74%)}
#fx-reveal .fx-rev-word{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:0 6vw;
  font:700 clamp(3rem,14vw,12rem) Panchang,sans-serif;letter-spacing:.01em;line-height:.9;
  color:rgba(79,227,212,.42);text-transform:uppercase;white-space:normal}
#fx-reveal.skikt .fx-rev-word{display:none}
#fx-reveal .fx-rev-grid{position:absolute;inset:0;display:none;
  background:linear-gradient(rgba(79,227,212,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(79,227,212,.16) 1px,transparent 1px);
  background-size:46px 46px}
#fx-reveal.skikt .fx-rev-grid{display:block}
#fx-reveal .fx-rev-meta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font:500 13px/1.8 var(--fx-mono);letter-spacing:.16em;color:rgba(79,227,212,.72);text-align:center;white-space:pre}

/* proximity-typografi: bokstäver reagerar på pekaren (JS-drivet, se fx.js) */
html[data-fx-type="proximity"] .fx-ch{opacity:1;transform:none;transition:transform .18s ease,filter .18s ease;will-change:transform}
html[data-fx-type="proximity"] .fx-line-inner{transform:none;opacity:1}

/* ══════════════════════════════════════════════════════════════════
   HUD — rymdskepps-navigation, 5 varianter
   ══════════════════════════════════════════════════════════════════ */
#fx-hud{position:fixed;inset:0;z-index:60;pointer-events:none;font-family:var(--fx-mono)}
#fx-hud *{pointer-events:auto}

/* spine */
.fx-sp{position:fixed;right:clamp(1rem,3vw,2.4rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.85rem;align-items:flex-end}
.fx-sp-line{position:absolute;right:5px;top:0;bottom:0;width:1px;background:rgba(232,244,242,.12)}
.fx-sp-fill{position:absolute;right:5px;top:0;width:1px;background:var(--teal);height:var(--prog,0%);box-shadow:0 0 8px var(--teal);transition:height .15s linear}
.fx-sp-item{display:flex;align-items:center;gap:.7rem;cursor:pointer;background:none;border:0;padding:0;
  font:600 11px/1 var(--fx-mono);letter-spacing:.12em;color:var(--dis);opacity:.45;transition:opacity .3s,color .3s}
.fx-sp-item .fx-sp-name{font-family:Supreme,sans-serif;font-size:12px;letter-spacing:.02em;max-width:0;overflow:hidden;white-space:nowrap;
  opacity:0;transform:translateX(6px);transition:max-width .4s,opacity .3s,transform .4s;text-align:right}
.fx-sp-item .fx-sp-dot{width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;transition:background .3s,transform .3s}
.fx-sp-item:hover{opacity:.85;color:var(--text)}
.fx-sp-item.on{opacity:1;color:var(--teal)}
.fx-sp-item.on .fx-sp-dot{background:var(--teal);transform:scale(1.25);box-shadow:0 0 8px var(--teal)}
.fx-sp-item.on .fx-sp-name{max-width:200px;opacity:1;transform:none}
.fx-sp-item.past{color:var(--teal-dim);opacity:.65}

/* dial */
.fx-dial{position:fixed;right:clamp(1rem,3vw,2.2rem);bottom:clamp(1rem,3vw,2.2rem);width:132px;height:132px}
.fx-dial svg{width:100%;height:100%;overflow:visible}
.fx-dial .fx-dl-tick{stroke:rgba(232,244,242,.22);stroke-width:2;transition:stroke .25s}
.fx-dial .fx-dl-tick.on{stroke:var(--teal);stroke-width:2.6;filter:drop-shadow(0 0 4px var(--teal))}
.fx-dial .fx-dl-tick.hit{cursor:pointer}
.fx-dial .fx-dl-arc{fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(79,227,212,.6))}
.fx-dial .fx-dl-ctr{text-anchor:middle;fill:var(--teal);font:700 15px var(--fx-mono);letter-spacing:.04em}
.fx-dial .fx-dl-sub{text-anchor:middle;fill:var(--dis);font:500 7px var(--fx-mono);letter-spacing:.22em}

/* constellation */
.fx-con{position:fixed;left:clamp(.6rem,2.4vw,1.8rem);top:50%;transform:translateY(-50%);width:118px;height:78vh;max-height:640px}
.fx-con svg{width:100%;height:100%;overflow:visible}
.fx-con .fx-cn-link{stroke:rgba(232,244,242,.14);stroke-width:1}
.fx-con .fx-cn-link.lit{stroke:var(--teal);stroke-opacity:.55}
.fx-con .fx-cn-node{fill:var(--duk);stroke:rgba(232,244,242,.4);stroke-width:1.4;cursor:pointer;transition:fill .3s,stroke .3s}
.fx-con .fx-cn-node.past{stroke:var(--teal-dim);fill:var(--teal-dim)}
.fx-con .fx-cn-node.on{fill:var(--teal);stroke:var(--teal);filter:drop-shadow(0 0 6px var(--teal))}
.fx-con .fx-cn-lbl{fill:var(--dis);font:600 9px var(--fx-mono);letter-spacing:.1em;opacity:0;transition:opacity .3s}
.fx-con .fx-cn-g.on .fx-cn-lbl{opacity:1;fill:var(--teal)}
.fx-con .fx-cn-pulse{fill:none;stroke:var(--teal);stroke-width:1.4;opacity:0}
.fx-con .fx-cn-g.on .fx-cn-pulse{animation:fxpulse 2.2s ease-out infinite}
@keyframes fxpulse{0%{r:5px;opacity:.7}100%{r:16px;opacity:0}}

/* filmstrip */
.fx-film{position:fixed;left:0;right:0;bottom:0;height:46px;display:flex;align-items:flex-end;
  padding:0 clamp(1rem,4vw,3rem) 10px;gap:6px;background:linear-gradient(transparent,rgba(5,10,12,.5))}
.fx-film-tick{flex:1;height:3px;background:rgba(232,244,242,.16);border:0;padding:0;cursor:pointer;position:relative;transition:height .25s,background .25s}
.fx-film-tick::after{content:attr(data-lbl);position:absolute;bottom:12px;left:0;font:600 9px/1 var(--fx-mono);letter-spacing:.1em;
  color:var(--teal);white-space:nowrap;opacity:0;transform:translateY(4px);transition:.25s}
.fx-film-tick:hover{height:7px;background:rgba(79,227,212,.5)}
.fx-film-tick:hover::after{opacity:1;transform:none}
.fx-film-tick.on{height:9px;background:var(--teal);box-shadow:0 0 10px var(--teal)}
.fx-film-tick.on::after{opacity:1;transform:none}
.fx-film-tick.past{background:var(--teal-dim)}

/* telemetry hud */
.fx-thud{position:fixed;left:clamp(1rem,3vw,2.2rem);top:clamp(4rem,10vh,6rem);
  padding:12px 15px;border:1px solid rgba(79,227,212,.28);background:rgba(5,10,12,.5);backdrop-filter:blur(6px);border-radius:5px;min-width:210px}
.fx-thud .fx-th-top{font:500 8px/1 var(--fx-mono);letter-spacing:.28em;color:var(--dis);margin-bottom:7px}
.fx-thud .fx-th-name{font:700 14px/1.1 Panchang,sans-serif;letter-spacing:.01em;color:var(--text);margin-bottom:9px}
.fx-thud .fx-th-name b{color:var(--teal);font-weight:700}
.fx-thud .fx-th-bar{height:3px;background:rgba(232,244,242,.14);border-radius:2px;overflow:hidden}
.fx-thud .fx-th-bar i{display:block;height:100%;width:var(--prog,0%);background:var(--teal);box-shadow:0 0 8px var(--teal);transition:width .15s linear}
.fx-thud .fx-th-seg{display:flex;gap:3px;margin-top:9px}
.fx-thud .fx-th-seg button{flex:1;height:14px;border:0;background:rgba(232,244,242,.1);cursor:pointer;border-radius:2px;transition:background .25s}
.fx-thud .fx-th-seg button.on{background:var(--teal)}
.fx-thud .fx-th-seg button.past{background:var(--teal-dim)}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAFI — 5 varianter, körs på splittad text
   ══════════════════════════════════════════════════════════════════ */
/* när en typvariant är på: neutralisera gamla .text-reveal, children animeras i stället */
html[data-fx-type]:not([data-fx-type="off"]) .station .text{opacity:1 !important;transform:none !important;transition:none}
html[data-fx-type]:not([data-fx-type="off"]) .station h1,
html[data-fx-type]:not([data-fx-type="off"]) .station h2{font-family:Archivo,sans-serif}
.fx-line{display:block;overflow:hidden;padding-right:.06em}
.fx-line-inner{display:block;white-space:nowrap;will-change:transform,opacity}
.fx-ch{display:inline-block;white-space:pre;will-change:transform,opacity}

/* cut — maskad rad-reveal (Panchang) */
html[data-fx-type="cut"] .fx-line-inner{transform:translateY(112%)}
html[data-fx-type="cut"] .station.inne .fx-line-inner{transform:translateY(0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*80ms)}

/* decode — glyf-scramble (JS driver texten; container fade) */
html[data-fx-type="decode"] .station h2,html[data-fx-type="decode"] .station h1{font-family:Supreme,sans-serif;text-transform:uppercase;letter-spacing:.02em}
html[data-fx-type="decode"] .fx-line-inner{opacity:0}
html[data-fx-type="decode"] .station.inne .fx-line-inner{opacity:1;transition:opacity .5s ease calc(var(--i,0)*90ms)}

/* focus — lins-fokus: suddig+bred → skarp+tight (Panchang) */
html[data-fx-type="focus"] .fx-line-inner{filter:blur(14px);opacity:0;letter-spacing:.2em}
html[data-fx-type="focus"] .station.inne .fx-line-inner{filter:blur(0);opacity:1;letter-spacing:normal;
  transition:filter 1s cubic-bezier(.2,.7,.2,1),opacity .8s,letter-spacing 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}

/* rise — per-tecken lyft + skew (Supreme) */
html[data-fx-type="rise"] .station h2,html[data-fx-type="rise"] .station h1{font-family:Supreme,sans-serif}
html[data-fx-type="rise"] .fx-ch{transform:translateY(1.1em) rotate(6deg);opacity:0}
html[data-fx-type="rise"] .station.inne .fx-ch{transform:none;opacity:1;
  transition:transform .7s cubic-bezier(.2,1.3,.3,1),opacity .5s;transition-delay:calc(var(--ci,0)*22ms)}

/* wipe — teal-svep + vikt-pop (Panchang 500→700) */
html[data-fx-type="wipe"] .station h1,html[data-fx-type="wipe"] .station h2{font-weight:500}
html[data-fx-type="wipe"] .fx-line{position:relative}
html[data-fx-type="wipe"] .fx-line-inner{clip-path:inset(0 100% 0 0);opacity:.4}
html[data-fx-type="wipe"] .fx-line::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px var(--teal)}
html[data-fx-type="wipe"] .station.inne .fx-line-inner{clip-path:inset(0 0 0 0);opacity:1;
  transition:clip-path .85s cubic-bezier(.7,0,.2,1),opacity .3s;transition-delay:calc(var(--i,0)*120ms)}
html[data-fx-type="wipe"] .station.inne h1 .fx-line-inner,html[data-fx-type="wipe"] .station.inne h2 .fx-line-inner{font-weight:700}
html[data-fx-type="wipe"] .station.inne .fx-line::after{animation:fxwipe .85s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(var(--i,0)*120ms)}
@keyframes fxwipe{0%{transform:scaleX(1);left:0}60%{transform:scaleX(1);left:100%}100%{transform:scaleX(0);left:100%}}

/* nr-räknare (delad över alla typvarianter) */
html[data-fx-type]:not([data-fx-type="off"]) .nr{font-family:var(--fx-mono);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════
   DJUP — parallax mellan text (.fx-depth) och canvas
   ══════════════════════════════════════════════════════════════════ */
.fx-depth{will-change:transform}
html[data-fx-par="tilt"] .station .text{perspective:900px}
html[data-fx-par="tilt"] .fx-depth{transform-style:preserve-3d}

/* ══════════════════════════════════════════════════════════════════
   KONTROLLPANEL — instrument, inte dev-verktyg
   ══════════════════════════════════════════════════════════════════ */
.fx-panel{position:fixed;left:clamp(.7rem,2vw,1.4rem);bottom:clamp(.7rem,2vw,1.4rem);z-index:10000;
  width:min(300px,86vw);background:rgba(6,12,14,.78);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(79,227,212,.22);border-radius:14px;color:var(--text);
  font-family:var(--fx-mono);box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.9,.2,1),opacity .3s}
.fx-panel.min .fx-body{display:none}
.fx-panel.gone{transform:translateY(140%);opacity:0;pointer-events:none}
.fx-head{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;cursor:grab;border-bottom:1px solid rgba(79,227,212,.14)}
.fx-head .fx-dotmark{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.fx-head b{font-size:11px;letter-spacing:.28em;font-weight:700}
.fx-head .fx-spacer{flex:1}
.fx-head button{background:none;border:1px solid rgba(232,244,242,.18);color:var(--dis);width:22px;height:22px;
  border-radius:6px;cursor:pointer;font-size:12px;line-height:1;display:grid;place-items:center;transition:.2s}
.fx-head button:hover{color:var(--teal);border-color:var(--teal)}
.fx-body{padding:.5rem .9rem .9rem;max-height:70vh;overflow:auto}
.fx-grp{margin-top:.85rem}
.fx-grp:first-child{margin-top:.4rem}
.fx-grp>label{display:block;font-size:9px;letter-spacing:.26em;color:var(--dis);margin-bottom:.5rem;text-transform:uppercase}
.fx-chips{display:flex;flex-wrap:wrap;gap:5px}
.fx-chip{border:1px solid rgba(232,244,242,.16);background:rgba(232,244,242,.03);color:var(--dis);
  font:600 10px/1 var(--fx-mono);letter-spacing:.04em;padding:.5em .7em;border-radius:7px;cursor:pointer;transition:.18s}
.fx-chip:hover{border-color:rgba(79,227,212,.5);color:var(--text)}
.fx-chip.on{background:var(--teal);border-color:var(--teal);color:#04110f;font-weight:700;box-shadow:0 0 14px rgba(79,227,212,.4)}
.fx-foot{display:flex;gap:6px;margin-top:1rem}
.fx-foot button{flex:1;border:1px solid rgba(232,244,242,.16);background:none;color:var(--dis);
  font:600 9px/1 var(--fx-mono);letter-spacing:.14em;padding:.6em;border-radius:7px;cursor:pointer;transition:.2s;text-transform:uppercase}
.fx-foot button:hover{color:var(--teal);border-color:var(--teal)}
.fx-tab{position:fixed;left:clamp(.7rem,2vw,1.4rem);bottom:clamp(.7rem,2vw,1.4rem);z-index:9999;
  width:40px;height:40px;border-radius:12px;background:rgba(6,12,14,.8);border:1px solid rgba(79,227,212,.3);
  color:var(--teal);cursor:pointer;display:none;place-items:center;font-size:16px;backdrop-filter:blur(10px)}
.fx-panel.gone ~ .fx-tab{display:grid}

@media (prefers-reduced-motion:reduce){
  #fx-cursor .fx-ret-ring,#fx-cursor .fx-orb-sat{animation:none !important}
}
@media (max-width:640px){
  .fx-con,.fx-dial{display:none}
  .fx-panel{width:92vw}
}