/* TRACE. app styles. The locked design system from output/trace_white_blue.html,
   extended into a responsive, installable app shell. White room, charcoal twin
   panels, one turquoise to blue LED gradient, sacred syringe, Protocol ring.
   Mobile first. The twins stack on phones and sit side by side on desktop. */

:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --easeFluid:cubic-bezier(.16,.84,.3,1);
  --easePress:cubic-bezier(.34,1.2,.64,1);
  font-synthesis:none;

  --wall1:#FFFFFF;--wall2:#F1F6FB;--floor:#E6EEF6;
  --ink:#0E1318;--ink2:#51606e;
  --led:#DCF6FF;--blue:#12B6EC;--blueDeep:#0C8FD0;
  --glow:rgba(18,182,236,.7);--glowSoft:rgba(60,214,246,.55);--ledglow:rgba(214,234,252,.6);
  --gink:#F2F6FA;--gink2:#9AA6B3;--ghair:rgba(255,255,255,.10);
  --fillw:25%;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  min-height:100%;color:var(--ink);
  font-family:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-optical-sizing:auto;font-feature-settings:"cv05" 1,"cv08" 1,"ss03" 1;letter-spacing:-.006em;
  background:
    radial-gradient(60% 40% at 50% 4%,rgba(220,236,252,.7),transparent 60%),
    radial-gradient(120% 80% at 50% -16%,var(--wall1),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,var(--wall1) 0%,var(--wall2) 62%,var(--floor) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
/* architectural LED strips on the room */
.led{position:fixed;pointer-events:none;background:#fff;box-shadow:0 0 18px 3px var(--ledglow),0 0 40px 8px rgba(206,228,248,.30);border-radius:4px;opacity:.8;z-index:0;}
.led.l1{left:6%;top:-4%;width:3px;height:54%;transform:rotate(14deg);transform-origin:top;}
.led.l2{right:6%;top:-4%;width:3px;height:54%;transform:rotate(-14deg);transform-origin:top;}
.led.top{left:30%;right:30%;top:4%;height:3px;width:auto;border-radius:40%;}

.tnum{font-variant-numeric:tabular-nums lining-nums slashed-zero;
  font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1,"cv05" 1,"cv08" 1;
  letter-spacing:0;font-variant-ligatures:none;}

/* ============ app frame ============ */
.app{position:relative;z-index:1;max-width:980px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 96px);
}
.topbar{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 18px;}
.brand{display:flex;align-items:baseline;gap:10px;}
.wordmark{font-size:26px;font-weight:650;letter-spacing:-.035em;line-height:1;color:var(--ink);}
.wordmark .dot{color:var(--blue);text-shadow:0 0 18px var(--glow);margin-left:-.02em;}
.brand .tag{font-size:10px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#7e8a98;}
.installbtn{appearance:none;border:1px solid rgba(60,110,170,.22);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);font-family:inherit;font-size:12px;font-weight:560;letter-spacing:-.004em;padding:8px 14px;border-radius:999px;cursor:pointer;
  box-shadow:0 8px 20px -12px rgba(60,110,170,.5),inset 0 1px 0 #fff;display:none;transition:transform .2s var(--easePress);}
.installbtn:hover{transform:translateY(-1px);}
.installbtn.show{display:inline-flex;}

/* ============ panels ============ */
.board{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:760px){.board{grid-template-columns:1.55fr 1fr;align-items:start;}}

.panel{position:relative;background:linear-gradient(180deg,#1C212B,#11151D);
  border:1px solid #2A313D;border-radius:28px;overflow:hidden;color:var(--gink);
  box-shadow:0 54px 96px -38px rgba(6,12,22,.72),0 8px 22px -12px rgba(6,12,22,.5),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);will-change:transform;}
.panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(95% 65% at 18% 0%,rgba(255,255,255,.07),transparent 55%),
    radial-gradient(80% 90% at 92% 112%,rgba(18,182,236,.15),transparent 60%),
    radial-gradient(60% 75% at 6% 110%,rgba(34,224,160,.09),transparent 60%);}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");}
.panel>*{position:relative;z-index:1;}
.pad{padding:22px 22px 24px;}
@media (hover:hover){
  .panel:hover{transform:translateY(-3px);box-shadow:0 64px 110px -38px rgba(8,16,26,.78),0 12px 28px -12px rgba(8,16,26,.55),inset 0 1px 0 rgba(255,255,255,.1);}
}

.statusbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--gink2);}
.statusbar .clk{font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1;font-weight:560;letter-spacing:0;color:var(--gink);}
.modetag{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gink2);}

/* compound header is a tap target that opens the library sheet */
.compound{display:flex;align-items:center;gap:12px;margin:16px 0 2px;width:100%;text-align:left;
  appearance:none;border:0;background:transparent;cursor:pointer;color:inherit;font-family:inherit;padding:6px;border-radius:14px;
  transition:background .2s var(--ease);}
.compound:hover{background:rgba(255,255,255,.04);}
.vial{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.10);border:1px solid var(--ghair);position:relative;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 2px -1px rgba(20,40,60,.18);}
.vial::after{content:"";position:absolute;left:7px;right:7px;bottom:6px;height:42%;border-radius:4px;background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);opacity:.92;box-shadow:0 0 9px var(--glow);}
.compound .ctext{flex:1;min-width:0;}
.compound h3{margin:0;font-size:17.5px;font-weight:600;letter-spacing:-.018em;line-height:1.1;color:var(--gink);}
.compound p{margin:3px 0 0;font-size:12px;font-weight:420;letter-spacing:-.002em;color:var(--gink2);}
.compound .chev{color:var(--gink2);font-size:18px;flex:none;opacity:.7;}

/* ring */
.scorewrap{display:flex;align-items:center;gap:22px;margin:22px 0 6px;}
.ring{position:relative;width:120px;height:120px;flex:none;}
.ring::before{content:"";position:absolute;left:2px;top:2px;width:116px;height:116px;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06);
  -webkit-mask:radial-gradient(circle 58px at 58px 58px,transparent 45px,#000 46px);
  mask:radial-gradient(circle 58px at 58px 58px,transparent 45px,#000 46px);}
.ring svg{position:relative;transform:rotate(-90deg);}
.ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring .num b{font-size:40px;font-weight:640;letter-spacing:-.04em;line-height:1;color:var(--gink);}
.ring .num span{font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--gink2);margin-top:5px;}
.lab{display:flex;flex-direction:column;gap:7px;min-width:0;}
.lab .lk{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gink2);}
.statepill{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;letter-spacing:-.018em;color:var(--gink);}
.statepill .sw{width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2BE6C6,#10C6E8 46%,#1296F2);box-shadow:0 0 16px 2px var(--glow);flex:none;}
.lab .sub{font-size:12.5px;font-weight:420;color:var(--gink2);line-height:1.5;letter-spacing:-.002em;max-width:24ch;}

/* syringe (sacred) */
.syr{margin:24px 2px 2px;}
.syrhead{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;}
.syrhead .lk{font-size:10px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:#C3CED9;}
.syrhead .hint{font-size:11px;font-weight:420;color:#76828f;}
.syr .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.syr .top .t{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--gink2);}
.syr .read{font-size:15px;font-weight:600;color:var(--gink);}
.syr .read .u2{color:var(--gink2);font-weight:500;}
.barrel{position:relative;height:48px;border-radius:13px;background:linear-gradient(180deg,#141925,#0D1018);border:1px solid rgba(255,255,255,.07);box-shadow:inset 0 2px 7px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.6);}
.barrel::before{content:"";position:absolute;top:-9px;bottom:-9px;left:-6px;width:calc(var(--fillw,25%) + 14px);border-radius:20px;
  background:radial-gradient(58% 120% at 38% 50%,var(--glow) 0%,rgba(18,182,236,.18) 50%,transparent 72%);filter:blur(11px);opacity:.95;transition:width 1.1s var(--ease);pointer-events:none;}
.fillclip{position:absolute;inset:0;border-radius:13px;overflow:hidden;}
.fill{position:absolute;left:0;top:0;bottom:0;width:25%;border-radius:12px 6px 6px 12px;transition:width 1.1s var(--ease);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 42%,transparent 58%,rgba(0,0,0,.04)),linear-gradient(90deg,#22E0A0,#10C6E8 55%,#1296F2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 0 18px 1px var(--glow),0 0 40px 3px var(--glowSoft);}
.fill .gloss{position:absolute;left:8px;right:7px;top:6px;height:6px;border-radius:5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8) 40%,transparent);opacity:.85;}
.fill .men{position:absolute;top:3px;bottom:3px;right:-2px;width:7px;border-radius:50%;background:var(--led);box-shadow:0 0 14px 2px var(--glow);}
.ticks{position:absolute;inset:0;pointer-events:none;}
.ticks i{position:absolute;top:0;width:1px;height:9px;background:rgba(255,255,255,.5);opacity:.62;}
.ticks i.maj{height:15px;width:1.5px;background:rgba(255,255,255,.8);opacity:.92;}
.target{position:absolute;top:-4px;bottom:-4px;left:25%;border-left:1.5px solid var(--blue);box-shadow:0 0 9px var(--glow);opacity:.95;transition:left 1.1s var(--ease);}
/* the scale, labeled every 5 units the way a U-100 actually reads, tens emphasized so the
   eye can chunk it. labels are positioned to sit under their own tick. */
.scaler{position:relative;height:13px;margin-top:9px;}
.scaler span{position:absolute;top:0;transform:translateX(-50%);font-size:10px;line-height:1;color:#AEB9C5;font-weight:500;
  font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1;letter-spacing:.01em;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.5);}
.scaler span.t{color:#EDF3F8;font-weight:700;}
.scaler span.edge0{transform:translateX(0);}
.scaler span.edge100{transform:translateX(-100%);}
/* on phones, show only the tens so 21 labels never crowd. the every-5 tick marks stay. */
@media (max-width:560px){.scaler span.five{display:none;}}

/* ============ right tile: readout + inputs ============ */
.rt .wlabel{font-size:10px;font-weight:650;letter-spacing:.24em;text-transform:uppercase;color:#C3CED9;}
.rt .big{font-size:44px;font-weight:640;letter-spacing:-.04em;line-height:1;margin:10px 0 4px;color:var(--gink);}
.rt .big .un{font-size:15px;color:var(--gink2);font-weight:500;letter-spacing:.01em;}
.rt .sub{font-size:12.5px;font-weight:420;letter-spacing:-.002em;color:var(--gink2);line-height:1.5;}

.fields{margin:22px 0 4px;display:flex;flex-direction:column;gap:10px;}
.field{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--ghair);border-radius:14px;padding:10px 12px;}
.field .fl{display:flex;flex-direction:column;gap:2px;min-width:0;}
.field .fl .lk{font-size:10px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:#C3CED9;}
.field .fl .hint{font-size:11px;color:#76828f;font-weight:420;}
.stepper{display:flex;align-items:center;gap:2px;flex:none;}
.stepper button{appearance:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--ghair);background:rgba(255,255,255,.06);
  color:var(--gink);font-size:17px;font-weight:500;line-height:1;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease),transform .12s var(--easePress);}
.stepper button:hover{background:rgba(255,255,255,.12);}
.stepper button:active{transform:scale(.9);}
.stepper input{width:62px;background:transparent;border:0;color:#F4F8FB;font-family:inherit;font-size:17px;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1;}
.stepper input:focus{outline:none;}
.stepper .uu{font-size:10.5px;color:var(--gink2);font-weight:460;width:24px;}

/* per-compound vial-size chips, charcoal panel with the one LED gradient on the active chip */
.field.fieldcol{flex-direction:column;align-items:stretch;gap:10px;}
.field.fieldcol .fieldtop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.vialchips{display:flex;flex-wrap:wrap;gap:6px;}
.vialchips .chip{appearance:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.01em;
  padding:8px 12px;min-height:34px;border-radius:11px;
  border:1px solid var(--ghair);background:rgba(255,255,255,.05);color:var(--gink2);
  font-variant-numeric:tabular-nums lining-nums;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),transform .12s var(--easePress);}
.vialchips .chip:hover{background:rgba(255,255,255,.10);color:var(--gink);}
.vialchips .chip:active{transform:scale(.94);}
.vialchips .chip.sel{color:#06222e;border-color:transparent;
  background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);
  box-shadow:0 6px 18px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.5);}
.vialchips .chip .cu{font-weight:500;opacity:.8;margin-left:2px;}
.blendnote{font-size:11px;color:#76828f;font-weight:420;margin-top:2px;}

.readouts{display:flex;gap:8px;margin-top:14px;}
.ro{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--ghair);border-radius:14px;padding:11px 12px;}
.ro .rk{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#B3BFCB;}
.ro .rv{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#F4F8FB;margin-top:5px;
  font-variant-numeric:tabular-nums lining-nums slashed-zero;font-feature-settings:"tnum" 1,"lnum" 1,"zero" 1;}
.ro .rv small{font-size:10.5px;font-weight:460;color:var(--gink2);margin-left:.5px;}

.notice{margin-top:12px;font-size:11.5px;line-height:1.5;color:#c9a86a;display:none;}
.notice.show{display:block;}
.convnote{margin:11px 0 0;font-size:11.5px;line-height:1.5;color:#8a97a6;font-weight:420;letter-spacing:.005em;}
.convnote b{color:#c9d4df;font-weight:600;}
.convnote[hidden]{display:none;}

.mark{margin-top:18px;width:100%;border:0;border-radius:16px;padding:14px 16px;cursor:pointer;font-size:13.5px;font-weight:600;letter-spacing:-.006em;font-family:inherit;color:#03222A;
  background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 14px 34px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .22s var(--easePress),box-shadow .22s var(--ease);will-change:transform;}
.mark:hover{transform:translateY(-1px);box-shadow:0 20px 42px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.62);}
.mark:active{transform:scale(.97) translateY(1px);box-shadow:0 6px 16px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .08s var(--ease);}
.mark:focus-visible{outline:none;box-shadow:0 14px 34px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.6),0 0 0 3px rgba(18,182,236,.4);}

/* subdued secondary action: same shape, charcoal panel skin, no new colors */
.mark.addvial{margin-top:10px;color:var(--gink);
  background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;
  box-shadow:0 18px 40px -26px rgba(6,12,22,.8),inset 0 1px 0 rgba(255,255,255,.07);}
.mark.addvial:hover{transform:translateY(-1px);box-shadow:0 24px 48px -26px rgba(6,12,22,.85),inset 0 1px 0 rgba(255,255,255,.1);}
.mark.addvial:active{transform:scale(.97) translateY(1px);box-shadow:0 8px 18px -12px rgba(6,12,22,.8),inset 0 1px 0 rgba(255,255,255,.06);}
.mark.addvial:focus-visible{box-shadow:0 18px 40px -26px rgba(6,12,22,.8),inset 0 1px 0 rgba(255,255,255,.07),0 0 0 3px rgba(18,182,236,.4);}

/* My Vials cards */
.vialdoses{margin-top:30px;}
.vialdoses h2{margin:0 4px 14px;font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink);}
.vialempty{text-align:center;color:var(--ink2);font-size:13px;padding:34px 20px;}
.vialempty .b{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:6px;}
.viallist{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.vcard{position:relative;background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;border-radius:20px;padding:15px 16px 16px;color:var(--gink);overflow:hidden;
  box-shadow:0 28px 50px -30px rgba(6,12,22,.7),inset 0 1px 0 rgba(255,255,255,.07);}
.vcard.dim{opacity:.62;}
.vcard .vtop{display:flex;align-items:flex-start;gap:12px;}
.vcard .vname{flex:1;min-width:0;}
.vcard .vname h4{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.014em;color:var(--gink);}
.vcard .vcat{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-shadow:0 0 14px rgba(18,182,236,.35);}
.vcard .vconc{font-size:12px;color:#c3ced9;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.vcard .vbar{margin:13px 0 9px;height:8px;border-radius:6px;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.05);overflow:hidden;}
.vcard .vbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 0 10px var(--glow);transition:width .5s var(--easeFluid);}
.vcard .vmeta{font-size:11.5px;color:#8a97a6;font-weight:420;}
.vcard .vmeta b{color:#c3ced9;font-weight:600;}
.vcard .vfoot{display:flex;align-items:center;gap:10px;margin-top:9px;}
.vialnote{margin:9px 4px 2px;font-size:11.5px;line-height:1.5;color:#8a97a6;font-weight:420;}
.vcard .vflag{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 9px;border-radius:20px;border:1px solid rgba(255,255,255,.14);color:var(--gink2);}
.vcard .vflag.fresh{color:#2BE6C6;border-color:rgba(43,230,198,.4);}
.vcard .vflag.soon{color:#F2B25A;border-color:rgba(242,178,90,.45);}
.vcard .vflag.low{color:#F2B25A;border-color:rgba(242,178,90,.45);}
.vcard .vflag.expired{color:#9AA7B4;border-color:rgba(154,167,180,.32);}
.vcard .vexp{flex:1;font-size:11px;color:var(--gink2);}
.vcard .vdel{appearance:none;border:0;background:transparent;color:var(--gink2);font-size:18px;cursor:pointer;padding:2px 4px;line-height:1;flex:none;}
.vcard .vdel:hover{color:#c3ced9;}

/* ============ Today / schedule ============ */
.todaytop{display:flex;align-items:center;gap:14px;margin:2px 0 20px;}
.streak{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:86px;height:86px;border-radius:20px;
  background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;
  box-shadow:0 14px 30px -18px rgba(6,12,22,.7),inset 0 1px 0 rgba(255,255,255,.06);}
.streak b{font-size:32px;font-weight:680;line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.streak span{font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8a97a6;margin-top:6px;}
.weekstrip{flex:1;display:flex;justify-content:space-between;gap:5px;}
.wcell{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;}
.wcell .wdot{width:13px;height:13px;border-radius:50%;background:rgba(120,140,160,.18);border:1px solid rgba(120,140,160,.3);}
.wcell.done .wdot{background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);border-color:transparent;box-shadow:0 0 8px var(--glow);}
.wcell.today .wdot{box-shadow:0 0 0 2px rgba(18,182,236,.55);}
.wcell .wlab{font-size:10px;font-weight:600;color:#8a97a6;}
.tsec{margin:0 0 18px;}
.tsk{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7e8a98;margin:0 4px 9px;}
.tnone{font-size:13px;color:var(--ink2);margin:0 4px;}
.duerow,.schedrow{display:flex;align-items:center;gap:12px;border-radius:16px;padding:12px 14px;margin-bottom:8px;color:var(--gink);
  background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;}
.duerow.done{opacity:.6;}
.dcheck{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid rgba(120,180,220,.4);background:transparent;
  color:#06222e;font-size:15px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);}
.duerow.done .dcheck{background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);border-color:transparent;box-shadow:0 4px 12px -5px var(--glow);}
.dmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dmain b{font-size:14.5px;font-weight:600;letter-spacing:-.012em;}
.dmain span{font-size:11.5px;color:#8a97a6;}
.ddone{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;color:#2BE6C6;padding:3px 9px;border-radius:20px;border:1px solid rgba(43,230,198,.4);}
.srem{flex:none;appearance:none;border:0;background:transparent;color:var(--gink2);font-size:18px;cursor:pointer;padding:2px 4px;line-height:1;}
.srem:hover{color:#c3ced9;}
.freqchips{display:flex;flex-direction:column;gap:9px;margin:6px 0 8px;}
.freqchip{appearance:none;text-align:left;font-size:15px;font-weight:560;color:var(--ink);background:var(--wall2);
  border:1px solid rgba(60,90,120,.16);border-radius:14px;padding:15px 16px;cursor:pointer;transition:all .15s var(--ease);}
.freqchip:hover{border-color:rgba(18,182,236,.5);}
.freqchip:active{transform:scale(.985);}
.schedtimerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px 14px;}
.schedtimerow label{font-size:13px;font-weight:560;color:var(--ink2);}
#schedtime{appearance:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--wall2);
  border:1px solid rgba(60,90,120,.16);border-radius:12px;padding:9px 12px;}
.calbtn{margin-top:14px;}
.syrseg{display:inline-flex;gap:3px;}
.syrbtn{appearance:none;border:0;background:rgba(255,255,255,.07);color:#aab8c6;font-family:inherit;font-size:10px;font-weight:650;
  letter-spacing:.01em;padding:4px 7px;border-radius:7px;cursor:pointer;transition:all .15s var(--ease);}
.syrbtn:hover{color:#dce8f2;}
.syrbtn.active{background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);color:#06222e;box-shadow:0 2px 8px -3px var(--glow);}
#scaler,.ticks{transition:opacity .34s var(--ease);}
@keyframes syrPulse{0%{box-shadow:0 0 0 0 rgba(18,182,236,0);}28%{box-shadow:0 0 26px 2px rgba(18,182,236,.5);}100%{box-shadow:0 0 0 0 rgba(18,182,236,0);}}
.syr.pulse .barrel{animation:syrPulse .6s var(--ease);}
@media (prefers-reduced-motion: reduce){.syr.pulse .barrel{animation:none;}#scaler,.ticks{transition:none;}}

/* ============ bottom tab bar (mobile widget feel) ============ */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;justify-content:center;gap:4px;
  padding:8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.82));
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.9);box-shadow:0 -8px 30px -18px rgba(60,110,170,.45);}
.tabbar .inner{display:flex;gap:4px;width:100%;max-width:520px;}
/* New Vial hero: the one LED-gradient + in the bar */
.tab-hero{color:#1296F2;}
.tab-hero .heroplus{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 6px 16px -5px rgba(18,182,236,.65);margin-bottom:2px;}
.tab-hero .heroplus svg{width:20px;height:20px;stroke:#06222E;stroke-width:2.4;}
/* Advanced calculator entry, demoted into Library */
.advbtn{margin-top:12px;appearance:none;border:1px solid rgba(18,182,236,.38);background:#F4F8FB;color:#0E1218;
  font-family:inherit;font-size:13px;font-weight:650;letter-spacing:.01em;padding:9px 16px;border-radius:12px;cursor:pointer;}
.advbtn:active{transform:scale(.97);}
/* Sites: Reset all + Undo */
.sitectrls{display:flex;gap:10px;justify-content:center;margin:12px 0 2px;}
.sitebtn{appearance:none;border:1px solid rgba(18,182,236,.32);background:#F4F8FB;color:#0E1218;
  font-family:inherit;font-size:13px;font-weight:650;padding:8px 18px;border-radius:11px;cursor:pointer;}
.sitebtn:active{transform:scale(.96);}
/* placeholder lock gate (code 1219) */
.gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 100% at 50% 0%,#11151D,#06080b);transition:opacity .42s ease;}
.gate.out{opacity:0;pointer-events:none;}
.gate .gateframe{width:100%;height:100%;border:0;display:block;}
/* the tab bar must not show through the lock screen (its z-index escapes the gate's wrapper) */
body.gatelock .tabbar{display:none;}
/* one-time "learn more" nudge from the vault into the Lab after the first vial */
.learnnudge{position:fixed;left:50%;bottom:calc(var(--tabbar-h,68px) + 16px);transform:translateX(-50%);z-index:16;
  appearance:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;
  color:#06222E;background:linear-gradient(135deg,#22E0A0,#10C6E8 55%,#1296F2);padding:13px 22px;border-radius:999px;
  box-shadow:0 12px 30px -8px rgba(18,182,236,.6);animation:learnpop .45s cubic-bezier(.34,1.4,.64,1) both;}
.learnnudge:active{transform:translateX(-50%) scale(.96);}
@keyframes learnpop{from{opacity:0;transform:translateX(-50%) translateY(14px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.gateinner{display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 28px;width:100%;max-width:320px;}
.gatebrand{font-size:30px;font-weight:680;letter-spacing:-.035em;color:#F4F8FB;}
.gatebrand .d{color:#12B6EC;}
.gatesub{font-size:14px;color:#9AA6B3;letter-spacing:.02em;margin-top:-4px;}
.gatedots{display:flex;gap:16px;margin:8px 0 12px;}
.gdot{width:13px;height:13px;border-radius:50%;background:transparent;border:1.6px solid #3a4654;transition:all .2s;}
.gdot.on{background:linear-gradient(135deg,#22E0A0,#10C6E8 55%,#1296F2);border-color:transparent;box-shadow:0 0 10px -1px rgba(18,182,236,.7);}
.gatekeys{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;width:100%;}
.gkey{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#EDF3F8;
  font-family:inherit;font-size:23px;font-weight:500;aspect-ratio:1;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,background .12s;}
.gkey:active{transform:scale(.93);background:rgba(18,182,236,.18);}
.gkey-empty{background:none;border:none;pointer-events:none;}
.gkey-del{font-size:18px;color:#9AA6B3;}
.gatehint{font-size:11px;color:#5b6776;letter-spacing:.12em;text-transform:uppercase;margin-top:6px;}
.gate.shake .gatedots{animation:gshake .4s;}
@keyframes gshake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.tab{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;border-radius:14px;color:#404a58;
  font-size:10px;font-weight:560;letter-spacing:.02em;transition:color .2s var(--ease),background .2s var(--ease);}
.tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tab[aria-selected="true"]{color:var(--blue);background:rgba(18,182,236,.08);}
.tab:hover{color:var(--ink);}

/* ============ views ============ */
.view{display:none;}
.view.active{display:block;animation:fade .4s var(--ease) both;}

/* My Vials = the embedded BioVault. Full-bleed from the top down to just above the tab
   bar; the vault carries its own BioVault header. Auto-hidden when the tab is inactive
   because .view (its ancestor) is display:none. */
/* the vault view must NOT animate: the fade keyframe leaves a transform on the active
   view, which traps the fixed .vaulthost as a containing block and collapses it to 0 height */
#view-log.active{animation:none;}
.vaulthost{position:fixed;left:0;right:0;top:0;bottom:var(--tabbar-h,68px);z-index:15;background:#06080b;}
.vaulthost iframe{width:100%;height:100%;border:0;display:block;}
.vaulthost .vaultempty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:8px;padding:0 32px;color:#aeb9c5;background:#06080b;}
.vaulthost a.vaultempty{text-decoration:none;}
.vaulthost .vaultempty .b{color:#F4F8FB;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.vaulthost .vaultempty p{margin:0;font-size:13.5px;line-height:1.5;max-width:300px;}
.vaulthost .emptyplus{display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;
  margin-bottom:18px;font-size:40px;font-weight:300;line-height:1;color:#06222E;
  background:linear-gradient(135deg,#22E0A0,#10C6E8 55%,#1296F2);animation:emptyPulse 2s ease-in-out infinite;}
@keyframes emptyPulse{0%,100%{box-shadow:0 0 22px -4px rgba(18,182,236,.5);transform:scale(1);}
  50%{box-shadow:0 0 36px -2px rgba(18,182,236,.85);transform:scale(1.06);}}
@media (prefers-reduced-motion:reduce){.vaulthost .emptyplus{animation:none;}}
.vaulthost .vaultcta{margin-top:18px;display:inline-block;text-decoration:none;padding:14px 22px;border-radius:14px;
  font-size:15px;font-weight:700;letter-spacing:.01em;color:#06222E;
  background:linear-gradient(90deg,#22E0A0,#10C6E8 55%,#1296F2);
  box-shadow:0 10px 30px -10px rgba(18,182,236,.6);transition:transform .14s cubic-bezier(.34,1.4,.64,1);}
.vaulthost .vaultcta:active{transform:scale(.96);}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* library */
.libhead{margin:2px 4px 14px;}
.libhead h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.02em;color:var(--ink);}
.libhead p{margin:5px 0 0;font-size:13px;color:var(--ink2);font-weight:420;}
.libgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (min-width:620px){.libgrid{grid-template-columns:1fr 1fr 1fr;}}
.card{position:relative;text-align:left;appearance:none;cursor:pointer;color:var(--gink);font-family:inherit;overflow:hidden;
  background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;border-radius:20px;padding:14px 14px 16px;
  box-shadow:0 28px 50px -30px rgba(6,12,22,.7),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease);}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 80% at 88% 110%,rgba(18,182,236,.14),transparent 60%);}
.card:hover{transform:translateY(-3px);box-shadow:0 40px 70px -28px rgba(6,12,22,.8),inset 0 1px 0 rgba(255,255,255,.1);}
.card.sel{border-color:rgba(18,182,236,.6);box-shadow:0 28px 50px -28px rgba(18,182,236,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(18,182,236,.4);}
.card .cv{width:26px;height:26px;border-radius:8px;position:relative;background:rgba(255,255,255,.10);border:1px solid var(--ghair);margin-bottom:12px;}
.card .cv::after{content:"";position:absolute;left:5px;right:5px;bottom:5px;height:44%;border-radius:3px;background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 0 8px var(--glow);}
.card h4{margin:0;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--gink);}
/* category in the one LED blue so the white compound name above it pops. same accent
   the syringe, ring, and Mark button are built on, tying every card to the system. */
.card .cc{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-shadow:0 0 14px rgba(18,182,236,.35);}
.card .cd{margin:10px 0 0;font-size:11.5px;color:#8a97a6;font-weight:420;}
.card .cd b{color:#c3ced9;font-weight:600;}

/* schedule / log */
.logempty{text-align:center;color:var(--ink2);font-size:13px;padding:40px 20px;}
.logempty .b{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:6px;}
.loglist{display:flex;flex-direction:column;gap:10px;}
.logrow{display:flex;align-items:center;gap:14px;background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;border-radius:18px;padding:14px 16px;color:var(--gink);
  box-shadow:0 24px 44px -30px rgba(6,12,22,.7),inset 0 1px 0 rgba(255,255,255,.06);}
.logrow .ld{width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#2BE6C6,#10C6E8 46%,#1296F2);box-shadow:0 0 14px 2px var(--glow);flex:none;}
.logrow .lmain{flex:1;min-width:0;}
.logrow .lmain b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;}
.logrow .lmain span{display:block;font-size:11.5px;color:var(--gink2);margin-top:3px;}
.logrow .lu{font-size:15px;font-weight:640;color:var(--gink);font-variant-numeric:tabular-nums slashed-zero;}
.logrow .ldel{appearance:none;border:0;background:transparent;color:var(--gink2);font-size:18px;cursor:pointer;padding:4px 6px;line-height:1;}
.logrow .ldel:hover{color:#ff7a7a;}

/* ============ library sheet (slide-up) ============ */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(14,19,24,.46);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
.scrim.open{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:50%;bottom:0;z-index:41;width:100%;max-width:560px;transform:translate(-50%,100%);
  background:var(--wall1);border-radius:26px 26px 0 0;box-shadow:0 -30px 80px -20px rgba(40,70,110,.4);
  padding:10px 16px calc(env(safe-area-inset-bottom) + 20px);max-height:82vh;overflow-y:auto;transition:transform .42s var(--easeFluid);}
.sheet.open{transform:translate(-50%,0);}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:#d3dde7;margin:8px auto 12px;}
.sheet h2{margin:0 4px 4px;font-size:18px;font-weight:650;letter-spacing:-.02em;color:var(--ink);}
.sheet .sp{margin:0 4px 14px;font-size:12.5px;color:var(--ink2);}
.sheet .libgrid{padding-bottom:6px;}

/* ============ compound profile sheet ============ */
/* the vault surfaced in-app. same slide-up sheet pattern, white room surface, the one
   LED gradient for accents only. opens from a Library card. */
.profsheet{max-width:520px;}
.profhead{display:flex;align-items:center;gap:14px;margin:2px 4px 14px;}
.profvial{width:42px;height:42px;border-radius:12px;flex:none;position:relative;
  background:linear-gradient(180deg,#1C212B,#11151D);border:1px solid #2A313D;
  box-shadow:0 10px 22px -12px rgba(6,12,22,.7),inset 0 1px 0 rgba(255,255,255,.08);}
.profvial::after{content:"";position:absolute;left:9px;right:9px;bottom:8px;height:42%;border-radius:4px;
  background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 0 10px var(--glow);}
.proftitle{min-width:0;}
.proftitle h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.022em;color:var(--ink);line-height:1.1;}
.profcat{margin:4px 0 0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-shadow:0 0 14px rgba(18,182,236,.3);}
.profwhat{margin:0 4px 16px;font-size:14px;line-height:1.55;color:var(--ink2);font-weight:420;letter-spacing:-.004em;}

.profbody{display:flex;flex-direction:column;gap:14px;}
.profsec{margin:0 4px;}
.profsec .pk{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7e8a98;margin:0 0 6px;}
.profsec .pv{font-size:13.5px;line-height:1.55;color:var(--ink);font-weight:420;letter-spacing:-.004em;margin:0;}
.profsec .pv.tnum{font-weight:600;}
.profchips{display:flex;flex-wrap:wrap;gap:7px;}
.profchip{font-size:12px;font-weight:540;line-height:1;letter-spacing:-.002em;color:var(--ink2);
  padding:8px 11px;border-radius:10px;background:var(--wall2);border:1px solid rgba(60,90,120,.14);}
.profchip.stack{color:#06222e;border-color:transparent;
  background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);box-shadow:0 5px 14px -7px var(--glow),inset 0 1px 0 rgba(255,255,255,.5);}

.profload{margin-top:20px;}
.profdisc{margin:14px 4px 2px;font-size:11px;line-height:1.6;color:#8893a2;font-weight:400;letter-spacing:-.001em;}
.profdisc b{color:var(--ink2);font-weight:600;}

/* ============ body map / rotation ============ */
/* the licensed wireframe figure, composited on the charcoal panel with screen blend so
   its black background drops away and only the blue glow remains. */
/* Front | Back segmented toggle, a clean pill matched to the panel system. */
.seg{display:flex;gap:4px;margin:12px auto 4px;padding:3px;width:max-content;
  background:rgba(255,255,255,.05);border:1px solid var(--ghair);border-radius:999px;}
.segbtn{appearance:none;border:0;background:transparent;color:var(--gink2);cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:560;letter-spacing:-.004em;
  min-height:34px;padding:0 18px;border-radius:999px;transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.segbtn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.segbtn.active{color:#06222e;background:linear-gradient(180deg,#9bf0ff,#49d4ff 60%,#19b4e6);
  box-shadow:0 4px 14px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.6);}

/* the two figures live in a flex row. on desktop both show side by side and the
   Front/Back toggle is hidden. on mobile one shows at a time, the toggle switches. */
.bodywrap{display:flex;justify-content:center;align-items:flex-start;gap:18px;padding:8px 0 2px;}
/* Sites: the body is the HERO. Numbered labels flank it, evenly spaced, never overlapping. */
#view-rotate .board{grid-template-columns:1fr;}
#view-rotate .libhead{margin-bottom:10px;} #view-rotate .libhead p{display:none;}
.facetier{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;}
.segback{appearance:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:#c3ced9;font-size:19px;line-height:1;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;}
.segback:active{transform:scale(.94);}
#view-rotate .pad{padding:16px 10px 14px;}
.sitesrow{display:flex;align-items:stretch;justify-content:center;gap:4px;margin:0;}
.sitesrow .bodywrap{flex:0 0 auto;padding:0;gap:0;}
.sitesrow .bodyfig{width:214px;height:auto;}
.flank{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-evenly;padding:4px 0;}
.flank.left{align-items:flex-end;}
.flanklabel{display:flex;align-items:center;gap:8px;appearance:none;border:0;background:none;cursor:pointer;padding:0;font-family:inherit;max-width:100%;}
.flank.left .flanklabel{flex-direction:row-reverse;}
.flanklabel:active{transform:scale(.96);}
.flanklabel .flnum{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#bfe6ff;background:rgba(18,38,58,.55);border:1px solid rgba(120,200,255,.28);transition:all .15s;}
.flanklabel.sel .flnum{color:#06222e;background:linear-gradient(135deg,#22E0A0,#10C6E8 55%,#1296F2);border-color:transparent;box-shadow:0 0 12px rgba(18,182,236,.7);}
.flanklabel .fltext{display:flex;flex-direction:column;line-height:1.18;min-width:0;}
.flank.left .fltext{align-items:flex-end;text-align:right;}
.flanklabel .fln{font-size:12.5px;font-weight:650;color:#E7EEF4;}
.flanklabel .flr{font-size:10.5px;font-weight:600;color:#F2B25A;}
.flanklabel .flr.ok{color:#7d8b99;}
#view-rotate .sitectrls{margin:8px 0 0;}
#view-rotate .sitebtn{padding:7px 18px;font-size:12.5px;}
.bodyfig{position:relative;width:240px;height:430px;max-width:100%;aspect-ratio:9 / 16;overflow:hidden;border-radius:14px;}
.figimg{position:absolute;inset:0;mix-blend-mode:screen;background-repeat:no-repeat;
  background-size:cover;background-position:center;}
body.sex-male .figimg.ff{background-image:url("assets/body-male-front.jpg");}
body.sex-male .figimg.fb{background-image:url("assets/body-male-back.jpg");}
body.sex-female .figimg.ff{background-image:url("assets/body-female-front.jpg");}
body.sex-female .figimg.fb{background-image:url("assets/body-female-back.jpg");}
.zonelayer{position:absolute;inset:0;width:100%;height:100%;}

/* mobile first: one figure at a time, toggle controls which. front is default. */
.figback{display:none;}
.bodywrap.showback .figfront{display:none;}
.bodywrap.showback .figback{display:block;}

/* desktop: both figures, no toggle. */
@media (min-width:760px){
  .seg#faceseg{display:none;}
  .figback{display:block;}
  .bodywrap.showback .figfront{display:block;}
}

/* injection-site markers: icy-white core with a dark contrast ring. */
.site{cursor:pointer;}
.site .hit{fill:transparent;}
.site .mcore{transition:fill .25s var(--ease),filter .25s var(--ease);}
.site .mrim{transition:opacity .25s var(--ease);}
.site .mglow{opacity:0;transition:opacity .3s var(--ease);}
/* recency heat: an amber halo whose opacity (set per marker) tracks how recently the site
   was used, fading to nothing over the recovery window. warm = just used, none = rested. */
.site .mheat{filter:drop-shadow(0 0 5px rgba(242,178,90,.85));transition:opacity .5s var(--ease);pointer-events:none;}
/* the user's current selection: a steady soft LED glow, a brightened icy-white core,
   and a continuous radar ping. no auto-suggest emphasis anywhere. */
.site.sel .mrim{opacity:1;stroke:#bfeeff;}
.site.sel .mcore{fill:#FFFFFF;filter:drop-shadow(0 0 5px rgba(73,212,255,.95));}
.site.sel .mglow{opacity:.62;}
/* radar ping: an unmistakable LED-blue sweep sized in viewBox units so it stays
   punchy when the figure scales down on a phone. a brighter stroke, a stronger
   glow, and a second concentric ring staggered in time read as a true radar beat.
   the 1.6s cadence and easing are shared with the synced .srow .sd row dot. */
/* radar grows by transform:scale, NOT by animating the SVG r attribute. Chrome animates
   r in CSS keyframes but WebKit (iOS Safari) does not, which froze the ring on iPhone
   while it expanded on desktop. transform + non-scaling-stroke animate identically in
   both engines, so the rings shoot out the same on mobile and desktop. base r is 5,
   scale 11 reaches an effective r of ~55. */
.site .ping{opacity:0;transform-box:fill-box;transform-origin:center;vector-effect:non-scaling-stroke;will-change:transform,opacity;}
.site.sel .ping{filter:drop-shadow(0 0 5px rgba(91,219,255,1)) drop-shadow(0 0 12px rgba(18,182,236,.8));}
.site.sel .ping1{animation:radarPing 1.5s var(--easeFluid) infinite;}
.site.sel .ping2{animation:radarPing 1.5s var(--easeFluid) infinite;animation-delay:.75s;}
@keyframes radarPing{
  0%{opacity:1;transform:scale(1);}
  55%{opacity:.42;}
  85%{opacity:.12;transform:scale(9);}
  100%{opacity:0;transform:scale(11);}
}
@media (hover:hover){.site:hover .mglow{opacity:.4;}}

/* right chart: a single vertical column of full-width buttons, one-to-one with markers. */
/* brand hero announcement: an amber callout with a live glowing dot that states the mechanic
   ("it glows amber now and cools over 7 days") and shows it. present on load, personalizes on log. */
.siteannounce{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:11px 13px;border-radius:13px;
  background:linear-gradient(180deg,rgba(242,178,90,.10),rgba(242,178,90,.035));border:1px solid rgba(242,178,90,.22);}
.siteannounce .adot{width:8px;height:8px;border-radius:50%;flex:none;align-self:flex-start;margin-top:3.5px;background:#F2B25A;
  box-shadow:0 0 6px 1px rgba(242,178,90,.9),0 0 14px 3px rgba(242,178,90,.45);animation:heatBreath 2.4s ease-in-out infinite;}
.siteannounce #nextsub{flex:1;font-size:12.5px;line-height:1.5;font-weight:500;color:#D9E0E8;letter-spacing:-.002em;}
@keyframes heatBreath{0%,100%{opacity:1;}50%{opacity:.5;}}
@media (prefers-reduced-motion: reduce){.siteannounce .adot{animation:none;opacity:1;}}
.nextbest{display:flex;align-items:center;gap:9px;margin-top:13px;}
.nextbest:empty{display:none;}
.nextbest .nbk{font-size:10px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:#7a8694;}
.nextbest .nbv{font-size:12.5px;font-weight:600;color:#C3CED9;}
.sitelist{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.sitelist .grouplabel{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gink2);margin:8px 2px 2px;}
.sitelist .grouplabel:first-child{margin-top:0;}
.srow{display:flex;flex-direction:row;align-items:center;gap:11px;text-align:left;width:100%;min-height:44px;
  background:rgba(255,255,255,.04);border:1px solid var(--ghair);border-radius:12px;padding:10px 13px;
  color:inherit;font-family:inherit;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);}
.srow:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.srow[aria-pressed="true"]{border-color:rgba(73,212,255,.7);background:rgba(73,212,255,.10);box-shadow:0 0 0 1px rgba(73,212,255,.35) inset;}
.srow .stext{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.srow .sn{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--gink);line-height:1.2;}
.srow .st{font-size:11.5px;color:var(--gink2);line-height:1.35;}
/* per-site recency badge: amber while warm, calm slate once rested. */
.srow .srec{margin-left:auto;flex:none;font-size:10.5px;font-weight:650;letter-spacing:.02em;color:#F2B25A;font-variant-numeric:tabular-nums;}
.srow .srec.ok{color:#7a8694;font-weight:500;}
/* the synced light: a dim neutral dot when unselected, a glowing LED-blue dot that
   pulses in lockstep with the body radar marker (same 1.6s cadence and easeFluid)
   when this row is the single current selection, so the row and the body beat as one. */
.srow .sd{width:9px;height:9px;border-radius:50%;flex:none;
  background:rgba(150,166,182,.42);box-shadow:none;transition:background .2s var(--ease),box-shadow .2s var(--ease);}
.srow[aria-pressed="true"] .sd,.srow.sel .sd{
  background:radial-gradient(circle at 38% 34%,#9bf0ff,#49d4ff 46%,#1296F2);
  animation:rowPulse 1.6s var(--easeFluid) infinite;}
@keyframes rowPulse{
  0%{box-shadow:0 0 5px 1px rgba(73,212,255,.65),0 0 12px 3px rgba(18,182,236,.45);transform:scale(1);}
  60%{box-shadow:0 0 3px 1px rgba(73,212,255,.35),0 0 8px 2px rgba(18,182,236,.22);transform:scale(.94);}
  100%{box-shadow:0 0 5px 1px rgba(73,212,255,.65),0 0 12px 3px rgba(18,182,236,.45);transform:scale(1);}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media (prefers-reduced-motion: reduce){
  /* keep a bold, clearly visible pulse on mobile even under reduce motion: an opacity
     breathe on a large static ring (no expanding sweep), so the selected spot still
     obviously pulsates and is never a tiny blip. the row dot breathes in lockstep. */
  .site.sel .ping1{animation:softBreath 1.6s ease-in-out infinite;transform:scale(4.6);stroke-width:1.6;}
  .site.sel .ping2{animation:softBreath 1.6s ease-in-out infinite;animation-delay:.8s;transform:scale(3.1);stroke-width:1.6;}
  .site.sel .mglow{opacity:.9;}
  .srow[aria-pressed="true"] .sd,.srow.sel .sd{animation:softBreath 1.5s ease-in-out infinite;
    box-shadow:0 0 7px 2px rgba(73,212,255,.85),0 0 16px 5px rgba(18,182,236,.6);}
}
@keyframes softBreath{0%,100%{opacity:.9;}50%{opacity:.25;}}

footer.disc{max-width:980px;margin:0 auto;padding:22px 18px calc(env(safe-area-inset-bottom) + 110px);}
footer.disc .ft{border-top:1px solid rgba(60,90,120,.14);padding-top:16px;font-size:11.5px;font-weight:400;color:#8893a2;line-height:1.7;letter-spacing:-.001em;max-width:74ch;}
footer.disc b{color:var(--ink2);font-weight:600;}
.footlinks{display:flex;flex-wrap:wrap;gap:7px 18px;margin:15px 0 10px;}
.footlinks button{appearance:none;border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:12px;font-weight:560;color:#5f6b7a;letter-spacing:-.002em;transition:color .15s var(--ease);}
.footlinks button:hover{color:var(--blue);}
.footcopy{font-size:11px;color:#9aa6b3;font-weight:420;letter-spacing:-.001em;margin:0;}

/* full-screen white-room legal reader */
.legalscrim{z-index:60;}
.legalsheet{position:fixed;inset:0;z-index:61;background:#F7F9FB;color:var(--ink);transform:translateY(100%);transition:transform .42s var(--ease);display:flex;flex-direction:column;overflow:hidden;}
.legalsheet.open{transform:translateY(0);}
.legalhead{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 15px) 20px 12px;background:#fff;border-bottom:1px solid rgba(60,90,120,.12);}
.legalmark{font-size:20px;font-weight:650;letter-spacing:-.035em;color:var(--ink);}
.legalmark .dot{color:var(--blue);text-shadow:0 0 16px var(--glow);}
.legalclose{appearance:none;border:0;background:rgba(14,19,24,.06);width:34px;height:34px;border-radius:50%;font-size:21px;line-height:1;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s var(--ease);}
.legalclose:hover{background:rgba(14,19,24,.1);}
.legalnav{flex:none;display:flex;gap:6px;overflow-x:auto;padding:12px 16px;background:#fff;border-bottom:1px solid rgba(60,90,120,.12);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.legalnav::-webkit-scrollbar{display:none;}
.legalnav button{flex:none;appearance:none;border:1px solid rgba(60,90,120,.16);background:#fff;cursor:pointer;font-family:inherit;font-size:12px;font-weight:560;color:#5f6b7a;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:color .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease);}
.legalnav button:hover{color:var(--ink);}
.legalnav button.active{background:linear-gradient(180deg,#22E0A0,#10C6E8 55%,#1296F2);color:#06222e;border-color:transparent;font-weight:600;}
.legalbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:26px 22px calc(env(safe-area-inset-bottom) + 56px);width:100%;max-width:740px;margin:0 auto;}
.legalbody h2{font-size:26px;font-weight:680;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px;}
.legalbody .lup{font-size:12px;color:#9aa6b3;font-weight:500;margin:0 0 22px;}
.legalbody h3{font-size:15px;font-weight:660;letter-spacing:-.015em;color:var(--ink);margin:25px 0 8px;}
.legalbody p{font-size:14px;line-height:1.65;color:#3a4550;margin:0 0 12px;letter-spacing:-.003em;}
.legalbody ul{margin:0 0 14px;padding-left:20px;}
.legalbody li{font-size:14px;line-height:1.6;color:#3a4550;margin:0 0 7px;letter-spacing:-.003em;}
.legalbody b{color:var(--ink);font-weight:650;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto;}
}