/* ORMIZ Works 1.55: the face & voice sign-in screen.
   Clean and quiet: a plain background with a fine grid, one scanner in the middle. It shows each step as it happens:
   looking for your face (a face outline with a scan line), listening (the ring follows your voice), verified (a green tick),
   then the scanner opens up into the workspace. Kept out of app.css so the light theme here is hand-made, not converted. */
.bio-scene{--bg:#060b16;--bg2:#0b1424;--ink:#eaf2ff;--dim:rgba(205,222,250,.66);--faint:rgba(205,222,250,.38);--line:rgba(140,180,255,.14);
  --acc:#4cd6ff;--acc2:#7aa8ff;--ok:#2ee6a6;--bad:#ff7a7a;--grid:rgba(120,165,255,.055);--glow:rgba(76,214,255,.16);--chip:rgba(255,255,255,.035);
  position:absolute;inset:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .6s;
  background:radial-gradient(ellipse 60% 55% at 50% 48%,var(--glow),transparent 70%),linear-gradient(180deg,var(--bg2),var(--bg));color:var(--ink);font-family:var(--body)}
html[data-theme=light] .bio-scene{--bg:#eef2f8;--bg2:#f8fafd;--ink:#0b1a33;--dim:#41567a;--faint:#7a8aa6;--line:rgba(20,60,130,.14);
  --acc:#0a7cc2;--acc2:#3d63d6;--ok:#0a9a66;--bad:#c9303f;--grid:rgba(20,60,130,.06);--glow:rgba(10,124,194,.10);--chip:rgba(255,255,255,.7)}
.bio-scene.in{opacity:1}
.bio-scene::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 85%)}
.bio-aurora,.bio-stars,.bio-vignette{display:none}

/* top: brand and who's locked here */
.bio-top{position:relative;z-index:2;display:flex;align-items:center;padding:24px 32px}
.bio-brand{display:flex;align-items:center;gap:12px;font-family:Michroma,sans-serif;font-size:13px;letter-spacing:.24em;color:var(--ink)}
.bio-brand img{width:34px;height:34px}
.bio-brand span{color:var(--acc)}
.bio-locks{display:flex;align-items:center;gap:12px;margin-left:auto}
.bio-lk-t{font-size:12px;color:var(--dim)}
.bio-faces{display:flex}.bio-faces span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--body);color:#fff;box-shadow:0 0 0 2px var(--bg)}
.bio-faces span+span{margin-left:-9px}

/* the three columns: clock, scanner, what's happening */
.bio-row{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(24px,4vw,64px);padding:0 clamp(20px,4vw,56px)}
.bio-left{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:18px;text-align:right}
.bio-clock{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.bio-clock b{font-family:var(--disp);font-weight:200;font-size:clamp(60px,10vmin,116px);line-height:1;letter-spacing:.01em;color:var(--ink)}
.bio-clock span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.bio-state{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font:500 13px var(--body);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);color:var(--dim)}
.bio-state .i{width:15px;height:15px}
.bio-state.is-lk{color:#e8a24a;box-shadow:inset 0 0 0 1px rgba(232,162,74,.45)}
html[data-theme=light] .bio-state.is-lk{color:#9a5a00}
.bio-right{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:340px}
.bio-scene .bio-cap{margin:0;min-height:0;max-width:340px;font-family:var(--body);font-weight:400;font-size:clamp(15px,1.9vmin,18px);line-height:1.5;color:var(--ink);text-align:left;letter-spacing:0}

/* the scanner */
.bio-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.bio-hud{position:relative;width:min(330px,40vmin);aspect-ratio:1;display:grid;place-items:center}
.bio-ticks{position:absolute;inset:0;width:100%;height:100%;stroke:var(--line);stroke-width:1.2;animation:bioSpin 120s linear infinite}
.bio-arcs{position:absolute;inset:0;width:100%;height:100%;fill:none;transform:rotate(-90deg)}
.bio-arcs circle{stroke-linecap:round;transition:stroke .4s}
.bio-arcs .a1{stroke:var(--acc);stroke-width:1.6;stroke-dasharray:70 986;animation:bioArc 6s linear infinite;opacity:.85}
.bio-arcs .a2{stroke:var(--line);stroke-width:1;stroke-dasharray:2 8}
.bio-arcs .a3{stroke:var(--acc2);stroke-width:1.2;stroke-dasharray:30 1139;animation:bioArc 10s linear infinite reverse;opacity:.6}
.bio-sat{display:none}
@keyframes bioArc{to{stroke-dashoffset:-1056}}
@keyframes bioSpin{to{transform:rotate(360deg)}}

.bio-orb{--lv:0;position:relative;width:64%;height:64%;border-radius:50%;border:0;padding:0;cursor:pointer;background:none;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.bio-orb .bio-halo{position:absolute;inset:-14%;border-radius:50%;box-shadow:0 0 0 1px var(--line);transform:scale(calc(1 + var(--lv) * .25));transition:transform .08s,box-shadow .3s}
.bio-orb .bio-ring{position:absolute;left:auto;top:auto;width:auto;height:auto;margin:0;inset:-5%;border-radius:50%;border:2px solid transparent;border-top-color:var(--acc);opacity:0;transition:opacity .3s}
.bio-core{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,rgba(76,214,255,.18),transparent 62%),radial-gradient(circle at 50% 50%,#0d1a30,#070d1a 70%);
  box-shadow:inset 0 0 0 1px rgba(122,200,255,.35),inset 0 0 40px rgba(76,214,255,.12),0 18px 50px -20px rgba(0,0,0,.7)}
html[data-theme=light] .bio-core{background:radial-gradient(circle at 50% 38%,rgba(10,124,194,.12),transparent 62%),radial-gradient(circle at 50% 50%,#ffffff,#e8eef8 72%);
  box-shadow:inset 0 0 0 1px rgba(10,124,194,.28),inset 0 0 30px rgba(10,124,194,.08),0 18px 50px -24px rgba(20,50,100,.35)}
.bio-core b{display:none}
/* idle: a slow "breathing" iris */
.bio-core::before{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(122,200,255,.35);box-shadow:0 0 0 10px rgba(122,200,255,.05),0 0 0 22px rgba(122,200,255,.03);animation:bioIris 4s ease-in-out infinite}
html[data-theme=light] .bio-core::before{border-color:rgba(10,124,194,.3);box-shadow:0 0 0 10px rgba(10,124,194,.05),0 0 0 22px rgba(10,124,194,.03)}
@keyframes bioIris{50%{transform:scale(1.07);opacity:.7}}

/* step 1: looking for your face */
.bio-scan{position:absolute;inset:14%;z-index:3;opacity:0;transition:opacity .35s}
.bio-scan svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--acc);stroke-width:1.4;stroke-linecap:round}
.bio-scan svg .dot{fill:var(--acc);stroke:none;opacity:0}
.bio-scan .br{position:absolute;width:18%;height:18%;border:2px solid var(--acc)}
.bio-scan .tl{left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}.bio-scan .tr{right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.bio-scan .bl{left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}.bio-scan .brr{right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.bio-scan .ln{position:absolute;left:6%;right:6%;height:2px;top:0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc),transparent);box-shadow:0 0 14px var(--acc)}
.bio-orb[data-m=look] .bio-scan{opacity:1}
.bio-orb[data-m=look] .bio-scan .ln{animation:bioScan 1.4s ease-in-out infinite alternate}
.bio-orb[data-m=look] .bio-scan .dot{animation:bioDot 1.4s ease-in-out infinite;animation-delay:calc(var(--d) * .12s)}
.bio-orb[data-m=look] .bio-core::before{opacity:0}
.bio-orb[data-m=look] .bio-ring{opacity:1;animation:bioSpin 1.1s linear infinite}
@keyframes bioScan{from{top:4%}to{top:94%}}
@keyframes bioDot{0%,100%{opacity:0}50%{opacity:1}}

/* step 2: listening (the ring follows the voice) and speaking */
.bio-orb[data-m=listen] .bio-halo{box-shadow:0 0 0 2px var(--ok),0 0 calc(10px + var(--lv) * 50px) rgba(46,230,166,.35)}
.bio-orb[data-m=listen] .bio-core::before{border-color:var(--ok);transform:scale(calc(1 + var(--lv) * .5));animation:none;transition:transform .08s}
.bio-orb[data-m=speak] .bio-core::before{animation:bioIris 1s ease-in-out infinite}
.bio-scene:has(.bio-orb[data-m=listen]) .bio-arcs .a1{stroke:var(--ok)}

/* step 3: verified */
.bio-tick{position:absolute;inset:26%;z-index:4;opacity:0;transform:scale(.7);transition:opacity .3s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.bio-tick svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.bio-tick circle{stroke-dasharray:151;stroke-dashoffset:151}.bio-tick path{stroke-dasharray:40;stroke-dashoffset:40}
.bio-orb[data-m=ok] .bio-tick{opacity:1;transform:none}
.bio-orb[data-m=ok] .bio-tick circle{animation:bioDraw .55s ease-out forwards}
.bio-orb[data-m=ok] .bio-tick path{animation:bioDraw .35s ease-out .45s forwards}
.bio-orb[data-m=ok] .bio-halo{box-shadow:0 0 0 2px var(--ok),0 0 40px rgba(46,230,166,.35)}
.bio-orb[data-m=ok] .bio-core::before{opacity:0}
.bio-scene:has(.bio-orb[data-m=ok]) .bio-arcs .a1,.bio-scene:has(.bio-orb[data-m=ok]) .bio-arcs .a3{stroke:var(--ok)}
@keyframes bioDraw{to{stroke-dashoffset:0}}
.bio-orb[data-m=bad] .bio-halo{box-shadow:0 0 0 2px var(--bad)}

.bio-name{font-family:Michroma,sans-serif;font-size:17px;letter-spacing:.5em;padding-left:.5em;color:var(--dim)}
.bio-wave{display:flex;align-items:center;gap:3px;height:36px;transition:opacity .3s}
.bio-wave i{display:block;width:3px;height:4px;border-radius:3px;background:var(--ok);transition:height .08s}
.bio-scene:not(:has(.bio-orb[data-m=listen])) .bio-wave{opacity:.15}

/* the three checks */
.bio-checks{display:flex;gap:8px;flex-wrap:wrap}
.bio-checks span{display:flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--chip);box-shadow:inset 0 0 0 1px var(--line);transition:all .3s}
.bio-checks span .i{width:14px;height:14px}.bio-checks b{font-weight:600}
.bio-checks span[data-s=busy]{color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);animation:bioPulse2 1.2s ease-in-out infinite}
.bio-checks span[data-s=ok]{color:#fff;background:var(--ok);box-shadow:none}
.bio-checks span[data-s=bad]{color:var(--bad);box-shadow:inset 0 0 0 1px var(--bad)}
@keyframes bioPulse2{50%{box-shadow:inset 0 0 0 1px var(--acc),0 0 0 4px rgba(76,214,255,.12)}}

/* bottom: weather, password, version */
.bio-strip{position:relative;z-index:2;margin:0 clamp(16px,3vw,40px) 24px;display:flex;align-items:center;gap:24px;padding:12px 20px;border-radius:18px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.bio-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-left:auto}
.bio-ver{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.06em}
.bio-pw{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--dim);font:500 13px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}
.bio-pw .i{width:14px;height:14px}.bio-pw:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--acc)}
.bio-wx{display:flex;align-items:center;gap:20px;flex:1;min-width:0}
.bio-wx-ic{width:34px;height:34px;flex:none;stroke:#e5a43c;stroke-width:1.5;fill:none}
.bio-wx-now{display:flex;flex-direction:column;padding-right:20px;border-right:1px solid var(--line)}
.bio-wx-now b{font:300 26px var(--disp);line-height:1;color:var(--ink)}.bio-wx-now span{font-size:13px;color:var(--dim)}
.bio-wx-now small{font-size:12px;color:var(--dim);margin-top:4px}
.bio-wx-hrs{display:flex;gap:22px;overflow:hidden}
.bio-wx-hrs div{display:flex;flex-direction:column;align-items:center;font-size:12px;color:var(--dim)}
.bio-wx-hrs b{font:400 15px var(--disp);color:var(--ink);margin-top:3px}.bio-wx-hrs i{font-style:normal;color:var(--acc)}
@media (max-width:980px){
  .bio-row{grid-template-columns:1fr;justify-items:center;gap:14px}
  .bio-left,.bio-right{justify-self:center;align-items:center;text-align:center}
  .bio-clock{align-items:center}.bio-scene .bio-cap{text-align:center}.bio-wave{justify-content:center}
  .bio-wx-hrs{display:none}.bio-strip{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.bio-scene *,.bio-scene *::before{animation:none!important}}

/* into the workspace: the scanner opens into a clean circle that fills the screen, then fades to show the desktop */
.bio-scene.warp .bio-top,.bio-scene.warp .bio-left,.bio-scene.warp .bio-right,.bio-scene.warp .bio-strip,.bio-scene.warp .bio-name,.bio-scene.warp .bio-ticks,.bio-scene.warp .bio-arcs{opacity:0;transition:opacity .3s}
.bio-warp{position:fixed;inset:0;z-index:20000;pointer-events:none;background:var(--wbg,#060b16);clip-path:circle(0 at 50% 50%);transition:clip-path .75s cubic-bezier(.7,0,.2,1),opacity .6s ease}
html[data-theme=light] .bio-warp{--wbg:#eef2f8}
.bio-warp.go{clip-path:circle(150% at 50% 50%)}
.bio-warp i{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;box-shadow:0 0 0 2px #2ee6a6,0 0 30px rgba(46,230,166,.5);opacity:0}
.bio-warp.go i{animation:bioOpen .8s cubic-bezier(.6,0,.2,1) forwards}
.bio-warp.go i:nth-child(2){animation-delay:.08s;box-shadow:0 0 0 1px #4cd6ff}.bio-warp.go i:nth-child(3){display:none}
.bio-warp span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:Michroma,sans-serif;font-size:13px;letter-spacing:.4em;color:#2ee6a6;opacity:0;white-space:nowrap}
html[data-theme=light] .bio-warp span{color:#0a9a66}
.bio-warp.go span{animation:bioWord .9s ease .25s forwards}
@keyframes bioOpen{10%{opacity:1}to{transform:scale(12);opacity:0}}
@keyframes bioWord{30%{opacity:1}70%{opacity:1}to{opacity:0}}
.bio-warp.lift{opacity:0}
/* 1.64: the 3D emblem replaces the flat scanner; the orb stays as the (invisible) button over it */
.l3d-host{position:absolute;inset:0;z-index:1;pointer-events:none}
.bio-scene.l3d .bio-hud>svg,.bio-scene.l3d .bio-sat,.bio-scene.l3d::before{display:none}
.bio-scene.l3d .bio-orb{width:100%;height:100%;border-radius:50%}
.bio-scene.l3d .bio-orb>*{opacity:0!important}
.bio-scene.l3d .bio-orb:focus-visible{outline:2px solid var(--acc);outline-offset:6px}
.bio-scene.l3d .bio-hud{width:min(420px,48vmin)}
.bio-co{display:block;font-family:var(--body);letter-spacing:0;font-size:12px;color:var(--dim);margin-left:4px}
.bio-scene.l3d-warm{--bg:#0b0907;--bg2:#1c1612;--ink:#f7ede2;--dim:rgba(240,222,200,.66);--faint:rgba(240,222,200,.38);--line:rgba(242,190,130,.16);
  --acc:#f2b27a;--acc2:#e5c49c;--ok:#9fe3b8;--bad:#ff8a6b;--glow:rgba(242,170,100,.14);--chip:rgba(255,235,210,.04)}
html[data-theme=light] .bio-scene.l3d-warm{--bg:#e8dccb;--bg2:#fbf5ec;--ink:#2a1e12;--dim:#6b5440;--faint:#9a8470;--line:rgba(150,100,50,.18);
  --acc:#b0652a;--acc2:#8a6a45;--ok:#2f8a5a;--bad:#b9442e;--glow:rgba(200,140,80,.14);--chip:rgba(255,255,255,.6)}

/* 1.64: the 3D sign-in. The emblem (login3d.js) draws on a full-size canvas behind; on the password page it sits beside the card */
.login{position:relative}
.l3d-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.l3d-bg .l3d-cv,.l3d-host .l3d-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.l3d-spot{display:none}
.login .card,.login .lg-desk{position:relative;z-index:2}
.login .thm-float{z-index:5}
.login.l3d:not(.bio-stage){grid-template-columns:minmax(0,1.15fr) minmax(320px,420px);grid-template-areas:"spot card" "spot desk";column-gap:clamp(24px,5vw,80px);align-content:center;padding:32px clamp(20px,5vw,80px)}
.login.l3d:not(.bio-stage) .l3d-spot{display:block;grid-area:spot;width:100%;max-width:480px;aspect-ratio:1;justify-self:center}
.login.l3d:not(.bio-stage) #lf{grid-area:card;align-self:end}
.login.l3d:not(.bio-stage) .lg-desk{grid-area:desk;align-self:start}
.login.bio-stage .l3d-bg,.login.bio-stage .l3d-spot{display:none}
@media (max-width:900px){.login.l3d:not(.bio-stage){grid-template-columns:minmax(0,1fr);grid-template-areas:"spot" "card" "desk";align-content:start;padding-top:12px}
  .login.l3d:not(.bio-stage) .l3d-spot{max-width:230px;margin-bottom:26px}}
.login .lk-co{margin-top:-8px;font-size:12.5px;color:var(--dim)}
.login.l3d .card{backdrop-filter:blur(16px)}

/* the warm look: champagne titanium and soft amber, calm and professional */
.login.l3d-warm{background:radial-gradient(ellipse 70% 60% at 30% 45%,#2b2219 0%,#16120e 55%,#0b0907 100%);--scan:#f2b27a;--ice:#ffe0bf;--azure:#d99a5b}
.login.l3d-warm .hud{background:linear-gradient(180deg,rgba(48,38,29,.72),rgba(20,16,12,.86));border-color:rgba(242,190,130,.18);box-shadow:inset 0 1px 0 rgba(255,235,210,.08),0 30px 60px -34px #000}
.login.l3d-warm .btn{color:#2a1606;background:linear-gradient(180deg,#ffe3c2,#f2b27a 55%,#d9925a);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -12px rgba(242,170,100,.75),0 0 0 1px rgba(242,178,122,.5)}
.login.l3d-warm .btn.ghost{color:#f6dcc0;background:rgba(255,220,180,.05);box-shadow:inset 0 0 0 1px rgba(242,190,130,.3)}
.login.l3d-warm .glow{color:#f2b27a;text-shadow:0 0 18px rgba(242,170,100,.45)}
.login.l3d-warm .ch{color:#e9b07a}
.login.l3d-warm .inp{background:rgba(10,8,6,.6);border-color:rgba(242,190,130,.2)}
.login.l3d-warm .inp:focus{border-color:rgba(242,178,122,.7);box-shadow:0 0 0 3px rgba(242,178,122,.16)}
.login.l3d-warm .lk img{filter:drop-shadow(0 0 12px rgba(242,170,100,.35))}
.login.l3d-blue{background:radial-gradient(ellipse 70% 60% at 30% 45%,#0c2148 0%,#050c1a 55%,#02050c 100%)}
html[data-theme=light] .login.l3d-warm{background:radial-gradient(ellipse 70% 60% at 30% 45%,#fbf3e8 0%,#efe3d3 55%,#e3d5c3 100%);--scan:#b8692b}
html[data-theme=light] .login.l3d-warm .hud{background:linear-gradient(180deg,rgba(255,252,247,.86),rgba(250,243,234,.92));border-color:rgba(150,100,50,.18)}
html[data-theme=light] .login.l3d-warm .inp{background:#fff;border-color:rgba(150,100,50,.22)}
html[data-theme=light] .login.l3d-warm .glow,html[data-theme=light] .login.l3d-warm .ch{color:#a35d24;text-shadow:none}
html[data-theme=light] .login.l3d-blue{background:radial-gradient(ellipse 70% 60% at 30% 45%,#f4f8fd 0%,#e4ecf6 55%,#d8e2ef 100%)}
.bio-scene.l3d .bio-name{margin-top:14px}
.login.l3d-warm .lg-state.out{background:rgba(242,178,122,.12);color:#f3cfa6}
html[data-theme=light] .login.l3d-warm .lg-state.out{background:rgba(176,101,42,.1);color:#8a4f1d}

/* 1.65.1: a calmer, designer finish for the face & voice screen (every sign-in style) */
.bio-clock b{font-family:var(--body);font-weight:200;font-size:clamp(64px,11vmin,128px);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:.95}
.bio-clock span{font-size:11.5px;letter-spacing:.34em;color:var(--faint);font-weight:500}
.bio-state,.bio-state.is-lk,.bio-state.out{background:none!important;box-shadow:none!important;padding:12px 0 0;border-radius:0;border-top:1px solid var(--line);font:400 13px var(--body);color:var(--dim)!important;gap:8px}
.bio-state .i{width:14px;height:14px;opacity:.8}
.bio-right{gap:18px;width:min(360px,34vw);max-width:none;padding:22px 24px;border-radius:22px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
html[data-theme=light] .bio-right{background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.6));box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -36px rgba(40,30,20,.35)}
.bio-scene .bio-cap{font-weight:300;font-size:clamp(16px,2vmin,19px);line-height:1.55;letter-spacing:-.005em;max-width:none}
.bio-wave{height:26px;gap:2px;width:100%;justify-content:flex-start}
.bio-wave i{width:2px;height:2px;border-radius:1px;background:var(--acc)}
.bio-scene:not(:has(.bio-orb[data-m=listen])) .bio-wave{opacity:.28}
.bio-checks{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%;padding-top:2px}
.bio-checks::before{content:"";position:absolute;left:16.66%;right:16.66%;top:15px;height:1px;background:var(--line)}
.bio-checks span{flex-direction:column;align-items:center;gap:9px;padding:0;border-radius:0;background:none!important;box-shadow:none!important;font-size:10px;letter-spacing:.2em;color:var(--faint);animation:none!important}
.bio-checks span .i{position:relative;z-index:1;width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:50%;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);transition:all .3s}
.bio-checks b{font-weight:600}
.bio-checks span[data-s=busy]{color:var(--acc)}
.bio-checks span[data-s=busy] .i{color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 6px color-mix(in srgb,var(--acc) 14%,transparent);animation:bioStep 1.4s ease-in-out infinite}
.bio-checks span[data-s=ok]{color:var(--ink)}
.bio-checks span[data-s=ok] .i{color:#fff;background:var(--ok);box-shadow:0 6px 18px -6px var(--ok)}
.bio-checks span[data-s=bad]{color:var(--bad)}.bio-checks span[data-s=bad] .i{color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
@keyframes bioStep{50%{box-shadow:inset 0 0 0 1.5px var(--acc),0 0 0 10px color-mix(in srgb,var(--acc) 6%,transparent)}}
.bio-name{font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.5em;color:var(--faint)}
@media (max-width:900px){.bio-right{width:min(420px,92vw);align-items:center}.bio-checks::before{top:15px}}
/* 1.68: the Face ID / Touch ID button stands out, and on a phone it is the big one */
.bio-pw.bio-key{color:#04121f;background:linear-gradient(135deg,var(--scan,#4cd6ff),var(--azure,#2f8cff));box-shadow:0 8px 22px -10px rgba(47,140,255,.8);font-weight:600}
.bio-pw.bio-key svg.i{color:#04121f}
@media (max-width:820px){.bio-foot{flex-wrap:wrap;justify-content:center;margin:0 auto;gap:10px}.bio-pw.bio-key{padding:12px 22px;font-size:15px;order:-1;width:100%;justify-content:center}}
/* 1.70: where to go, when it couldn't be told from the answer */
.bio-choose{display:flex;gap:12px;justify-content:center;margin-top:14px;position:relative;z-index:3}
.bio-ch{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:130px;padding:14px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:inherit;font:600 14px var(--body);cursor:pointer;backdrop-filter:blur(10px)}
.bio-ch:hover{background:rgba(255,255,255,.16)}.bio-ch svg.i{width:26px;height:26px}
/* 1.71.3: on a phone (or a short window) the sign-in screen scrolls, so the Face ID and password buttons can always be reached */
@media (max-width:820px),(max-height:620px){
  .login.bio-stage{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .bio-scene{position:relative;inset:auto;min-height:100%;overflow:visible;padding-bottom:max(18px,env(safe-area-inset-bottom))}
}