/* ============ CanIEatThis? ============ */
:root{
  --bg:#f7f6f3; --bg2:#eeece7; --panel:#ffffff; --panel-2:#faf9f7;
  --ink:#14150f; --ink-2:#5c5f52; --line:#e2dfd6;
  --brand-1:#3fb96b; --brand-2:#12a5a0; --brand-3:#8fd14f;
  --yes:#15803d; --yes-bg:#e8f7ec; --yes-glow:63,185,107;
  --maybe:#a35a00; --maybe-bg:#fdf3e3; --maybe-glow:224,150,45;
  --no:#b3261e;  --no-bg:#fdebe9;  --no-glow:220,80,70;
  --shadow:0 1px 2px rgba(20,21,15,.05), 0 8px 24px -12px rgba(20,21,15,.18);
  --shadow-lg:0 2px 4px rgba(20,21,15,.05), 0 24px 60px -20px rgba(20,21,15,.28);
  --r:16px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e100e; --bg2:#141713; --panel:#181b18; --panel-2:#1e221e;
  --ink:#eef0ea; --ink-2:#9aa094; --line:#2b302b;
  --brand-1:#5ee08d; --brand-2:#3ad6cf; --brand-3:#b6f06a;
  --yes:#6ee79a; --yes-bg:#11251a; --yes-glow:94,224,141;
  --maybe:#f0bb63; --maybe-bg:#2a2013; --maybe-glow:240,187,99;
  --no:#ff8a7d;  --no-bg:#2d1614;  --no-glow:255,138,125;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lg:0 2px 4px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.85);
}}
*{box-sizing:border-box}
/* The hidden attribute must beat any display rule in this file. */
[hidden]{display:none!important}
/* Nothing animates until the first frame is painted, which is what caused
   the flicker on load. app.js removes .booting on the next frame. */
body.booting *,body.booting *::before,body.booting *::after{
  animation:none!important;transition:none!important}
html{
  scroll-behavior:smooth;
  /* Rubber-band scrolling past the top exposes the html element, not the
     body, so it needs its own background or you get a white flash. */
  background:var(--bg);
  scroll-padding-top:78px;      /* sticky header shouldn't cover scrolled-to content */
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;min-height:100vh;color:var(--ink);
  overflow-x:clip;   /* never scroll sideways; `clip` keeps sticky working */
  background:linear-gradient(170deg,var(--bg) 0%,var(--bg2) 100%);
  background-attachment:fixed;  /* gradient covers the viewport at any scroll position */
  overscroll-behavior-y:none;   /* no bounce past the ends */
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---- background layers ----
   body carries a linear-gradient, and in CSS painting order an in-flow
   element's background paints AFTER negative-z-index children of the root
   stacking context. So anything at z-index:-1 here is painted over by that
   gradient and never shows. A background layer that needs to be seen sits at
   z-index 0 instead; main is lifted to 1 so page content still covers it.
   (.mesh below is left at -1 — it has never rendered for exactly this reason,
   and switching it on now would change the look of every page.) */
main{position:relative;z-index:1}

/* ---- drifting gradient mesh ---- */
.mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(70px);opacity:.5}
@media (prefers-color-scheme:dark){.mesh{opacity:.34}}
.blob{position:absolute;width:52vmax;height:52vmax;border-radius:50%;will-change:transform}
.b1{background:radial-gradient(circle,var(--brand-1),transparent 62%);top:-22%;left:-14%;animation:drift1 26s ease-in-out infinite}
.b2{background:radial-gradient(circle,var(--brand-2),transparent 62%);top:14%;right:-22%;animation:drift2 32s ease-in-out infinite}
.b3{background:radial-gradient(circle,var(--brand-3),transparent 64%);bottom:-26%;left:24%;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.14)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.08)}50%{transform:translate(-11vw,10vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(.96)}50%{transform:translate(7vw,-9vh) scale(1.16)}}

/* ---- header ---- */
header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;max-width:800px;margin:0 auto;position:sticky;top:0;z-index:20;
  backdrop-filter:blur(14px) saturate(150%);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.logo-mark{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:#fff;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 45%,var(--brand-2));
  box-shadow:0 3px 12px -3px rgba(var(--yes-glow),.6);animation:beat 4.5s ease-in-out infinite}
.logo-mark svg{width:16px;height:16px}
@keyframes beat{0%,88%,100%{transform:scale(1)}92%{transform:scale(1.13)}96%{transform:scale(1.05)}}
.logo-text{font-weight:640;letter-spacing:-.025em;font-size:16.5px}
.logo-text em{font-style:normal;background:linear-gradient(120deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

/* ---- layout ---- */
main{max-width:800px;margin:0 auto;padding:26px 22px 40px}
.hero{text-align:center;padding:30px 0 26px}
.hero h1{font-size:clamp(34px,6.4vw,50px);line-height:1.05;margin:0 0 12px;letter-spacing:-.035em;font-weight:700;
  background:linear-gradient(100deg,var(--brand-2) 0%,var(--brand-1) 18%,var(--ink) 50%,var(--brand-1) 82%,var(--brand-2) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:sheen 16s linear infinite}
@keyframes sheen{to{background-position:200% center}}
/* If background-clip:text is unsupported, show solid text rather than nothing. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1,.land h1,.ab-hero h1,.pt-title{color:var(--ink)!important;background:none!important}
}
.hero p{color:var(--ink-2);max-width:44ch;margin:0 auto;font-size:15.5px}
.hero strong{color:var(--ink);font-weight:600}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin-bottom:18px;box-shadow:var(--shadow)}
h2{font-size:17px;margin:0 0 6px;letter-spacing:-.015em}
.sub,.hint{color:var(--ink-2);font-size:13.5px;margin:0 0 14px}
.muted{color:var(--ink-2)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---- dropzone ---- */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  padding:34px 20px;border-radius:14px;cursor:pointer;position:relative;overflow:hidden;
  border:1.5px dashed color-mix(in srgb,var(--brand-1) 42%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 7%,var(--panel)),color-mix(in srgb,var(--brand-2) 6%,var(--panel)));
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.dropzone:hover{transform:translateY(-2px);border-color:var(--brand-1);box-shadow:0 12px 34px -16px rgba(var(--yes-glow),.65)}
.dropzone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--brand-1) 26%,transparent) 50%,transparent 62%);
  transform:translateX(-100%)}
.dropzone:hover::after{animation:sweep 1.1s ease}
@keyframes sweep{to{transform:translateX(100%)}}
.dz-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;margin-bottom:4px;color:#fff;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 50%,var(--brand-2));
  box-shadow:0 8px 22px -8px rgba(var(--yes-glow),.75)}
.dz-icon svg{width:22px;height:22px}
.dz-title{font-weight:620;font-size:16px}
.dz-sub{color:var(--ink-2);font-size:13px;max-width:34ch}
.dz-sub em{font-style:normal;color:var(--brand-1);font-weight:600}

/* ---- controls ---- */
button{font:inherit;cursor:pointer;border:0;border-radius:11px;padding:11px 20px;transition:transform .16s,box-shadow .2s,opacity .2s}
button:active{transform:scale(.97)}
.primary{color:#04140a;font-weight:640;background:linear-gradient(120deg,var(--brand-3),var(--brand-1) 52%,var(--brand-2));
  background-size:200% auto;box-shadow:0 8px 22px -10px rgba(var(--yes-glow),.85)}
.primary:hover{background-position:right center;box-shadow:0 12px 30px -10px rgba(var(--yes-glow),1)}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.ghost:hover{background:var(--panel-2)}
.linky{background:none;color:var(--ink-2);padding:12px 0 2px;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;display:block;margin:0 auto}
.linky:hover{color:var(--brand-1)}
input,select{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel-2);color:var(--ink);transition:border-color .18s,box-shadow .18s}
input:focus,select:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 3.5px rgba(var(--yes-glow),.16)}
label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:12px;font-weight:500}
label input,label select{margin-top:5px;color:var(--ink)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:540px){.grid{grid-template-columns:1fr}}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

/* ---- the answer ---- */
.answer{position:relative;border-radius:22px;padding:34px 26px 28px;text-align:center;overflow:hidden;
  border:1px solid;box-shadow:var(--shadow-lg);margin-bottom:16px;
  animation:pop .62s cubic-bezier(.16,1.1,.3,1) both}
@keyframes pop{0%{opacity:0;transform:translateY(26px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
.answer::before{content:"";position:absolute;inset:-40% -20% auto;height:180%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(var(--glow),.32),transparent 68%);animation:halo 5s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}
.a-yes  {--glow:var(--yes-glow);  border-color:color-mix(in srgb,var(--yes) 45%,transparent);  background:linear-gradient(165deg,var(--yes-bg),var(--panel) 82%)}
.a-maybe{--glow:var(--maybe-glow);border-color:color-mix(in srgb,var(--maybe) 45%,transparent);background:linear-gradient(165deg,var(--maybe-bg),var(--panel) 82%)}
.a-no   {--glow:var(--no-glow);   border-color:color-mix(in srgb,var(--no) 45%,transparent);   background:linear-gradient(165deg,var(--no-bg),var(--panel) 82%)}
.a-word{position:relative;font-size:clamp(52px,13vw,80px);line-height:1;font-weight:800;letter-spacing:-.05em;margin:0 0 6px;
  animation:word .75s cubic-bezier(.16,1.1,.3,1) both .1s}
@keyframes word{from{opacity:0;transform:scale(.7) translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.a-yes .a-word  {background:linear-gradient(140deg,var(--yes),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.a-maybe .a-word{background:linear-gradient(140deg,var(--maybe),#e0a03d);-webkit-background-clip:text;background-clip:text;color:transparent}
.a-no .a-word   {background:linear-gradient(140deg,var(--no),#e05a4a);-webkit-background-clip:text;background-clip:text;color:transparent}
.a-line{position:relative;font-size:16px;font-weight:560;margin:0 auto;max-width:40ch;animation:rise .6s ease both .26s}
.a-item{position:relative;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-2);margin-bottom:14px;animation:rise .5s ease both .05s}

/* ---- detail panels ---- */
.panel{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;background:var(--panel);
  animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.panel:nth-of-type(1){animation-delay:.3s}.panel:nth-of-type(2){animation-delay:.38s}
.panel h4{margin:0 0 4px;font-size:13.5px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.d-yes{background:var(--yes);color:var(--yes)}.d-maybe{background:var(--maybe);color:var(--maybe)}.d-no{background:var(--no);color:var(--no)}
.panel p{margin:0;font-size:14px;color:var(--ink-2)}
.panel ul{margin:8px 0 0;padding-left:17px;font-size:13.5px;color:var(--ink-2)}
.panel li{margin-bottom:3px}

.kv{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}
.kv span{font-size:11.5px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.kv span:nth-child(2){animation-delay:.05s}.kv span:nth-child(3){animation-delay:.1s}
.kv span:nth-child(4){animation-delay:.15s}.kv span:nth-child(5){animation-delay:.2s}

.match{border-top:1px solid var(--line);padding:13px 0;font-size:13.5px}
.match strong{font-size:14px}
.match a{color:var(--brand-1);text-decoration:none;font-weight:560}
.match a:hover{text-decoration:underline}
.match ul{margin:6px 0 4px;padding-left:17px;color:var(--ink-2)}
.item{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 0;font-size:14px}
.item:hover{background:var(--panel-2)}

/* ---- scanning ---- */
.scanning{text-align:center;padding:42px 22px}
.scanbar{height:3px;width:190px;margin:0 auto 16px;border-radius:99px;overflow:hidden;background:var(--line);position:relative}
.scanbar::after{content:"";position:absolute;inset:0;width:45%;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-3),var(--brand-1),var(--brand-2));animation:slide 1.15s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-115%)}100%{transform:translateX(255%)}}
.scanning p{color:var(--ink-2);font-size:14px;margin:0}

dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);
  max-width:360px;padding:24px;box-shadow:var(--shadow-lg);animation:pop .35s cubic-bezier(.16,1.1,.3,1)}
dialog::backdrop{background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
dialog h3{margin:0 0 4px}
footer{max-width:800px;margin:0 auto;padding:10px 22px 46px;color:var(--ink-2);font-size:11.5px;text-align:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---- quota gate ---- */
.gate{text-align:center;padding:32px 26px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-1) 8%,var(--panel)),var(--panel) 78%)}
.gate-icon{width:46px;height:46px;margin:0 auto 12px;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 50%,var(--brand-2));
  box-shadow:0 8px 24px -8px rgba(var(--yes-glow),.7);animation:beat 3s ease-in-out infinite}
.gate-icon svg{width:24px;height:24px}
.gate h2{font-size:19px;margin-bottom:8px}
.gate .sub{max-width:42ch;margin:0 auto 18px}
.gate-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---- dialogs ---- */
dialog{position:relative}
.dlg-x{position:absolute;top:10px;right:10px;width:30px;height:30px;padding:0;line-height:1;
  font-size:20px;border-radius:9px;background:transparent;color:var(--ink-2);border:1px solid transparent}
.dlg-x:hover{background:var(--panel-2);color:var(--ink);border-color:var(--line)}
dialog .sub{margin-bottom:16px}
#signinMsg:empty{display:none}
#signinMsg{margin-top:12px;padding:10px 12px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line)}

/* ---- account panel ---- */
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.acct-row:first-child{border-top:0}
.acct-label{color:var(--ink-2);font-size:13px}
.acct-val{font-weight:560}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 8px}
.stat{text-align:center;padding:12px 8px;border-radius:11px;background:var(--panel-2);border:1px solid var(--line)}
.stat b{display:block;font-size:20px;letter-spacing:-.02em;
  background:linear-gradient(130deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.switch{display:flex;align-items:center;gap:9px;cursor:pointer;margin:0}
.switch input{width:auto;margin:0}
.danger{color:var(--no);border-color:color-mix(in srgb,var(--no) 40%,transparent)}
.danger:hover{background:var(--no-bg)}

/* ============ tabs ============ */
header{gap:14px}
.tabs{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:3px}
.tabs button{position:relative;background:transparent;color:var(--ink-2);padding:7px 15px;border-radius:9px;
  font-size:14px;font-weight:540;transition:color .2s,background .25s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);background:var(--panel);box-shadow:var(--shadow)}
.pip{position:absolute;top:5px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--brand-1);
  box-shadow:0 0 0 0 rgba(var(--yes-glow),.7);animation:pulse 2.4s infinite;opacity:0}
.pip.on{opacity:1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--yes-glow),.7)}70%{box-shadow:0 0 0 7px rgba(var(--yes-glow),0)}100%{box-shadow:0 0 0 0 rgba(var(--yes-glow),0)}}
@media(max-width:620px){
  header{flex-wrap:wrap;justify-content:center;gap:10px}
  .logo{order:1}#account{order:2;margin-left:auto}
  /* Five tabs do not fit across a phone. Rather than shrink them below a
     usable tap size, the row scrolls sideways and keeps the active one in
     view. justify-content:center on an overflowing flex row clips the first
     items unreachably, so it starts at flex-start instead. */
  .tabs{order:3;width:100%;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto;scroll-snap-align:center;min-height:44px;padding:9px 16px;font-size:15px}
  #account button,#account a{min-height:44px}
}

/* Phone: every control gets a 44px target, the size a fingertip actually needs. */
@media(max-width:560px){
  button,.filebtn,.chip,.opt,.linky,.ghost,.primary{min-height:44px}
  .chip{padding:10px 15px}
  .tabs button{min-height:44px}
  .land .primary.big{width:100%;max-width:340px}
  .foodsearch{flex-direction:column;align-items:stretch;gap:9px}
  .foodsearch input,.foodsearch button{width:100%;min-height:46px}
  .manual .grid,#manual .grid{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .pc-facts{gap:6px}
  .pc-fact{flex:1 1 100%}
  .h-parts{gap:6px}
  .h-parts span{padding:5px 10px}
  .land-steps{gap:10px}
  .stats{gap:8px}
  .stat{padding:10px 6px}

  /* Standalone links that behave like buttons need button-sized targets.
     Inline citations inside prose deliberately do NOT — padding them to 44px
     would wreck the line rhythm of the paragraph they sit in. */
  .ab-links a,.acct-actions a,.match a.btnish{min-height:44px;display:inline-flex;
    align-items:center;justify-content:center;padding:10px 18px}
  .dlg-x{width:44px;height:44px;font-size:26px}
  .logo{padding:6px 2px}
  .ptfilters .chip,.filters .chip{min-height:42px}
  .againbar .ghost{min-height:46px;width:100%;max-width:320px}
  .tray-cta .primary{min-height:50px;width:100%}
  .shot-x{width:34px;height:34px;font-size:19px}
}
.view{}

/* ============ landing ============ */
.land{text-align:center;padding:34px 0 20px}
.land-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:var(--panel);margin-bottom:22px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--brand-1);animation:pulse 2.4s infinite}
.land h1{font-size:clamp(38px,7.5vw,62px);line-height:1.02;margin:0 0 20px;letter-spacing:-.04em;font-weight:750;
  background:linear-gradient(100deg,var(--brand-2) 0%,var(--brand-1) 18%,var(--ink) 50%,var(--brand-1) 82%,var(--brand-2) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:sheen 16s linear infinite}
.land-lead{color:var(--ink-2);max-width:47ch;margin:0 auto 14px;font-size:16px;line-height:1.65}
.land-lead em{font-style:normal;color:var(--ink);font-weight:600}
.primary.big{font-size:17px;padding:15px 38px;border-radius:14px;margin-top:12px}
.land-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:46px 0 34px;text-align:left}
@media(max-width:640px){.land-steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 18px;
  box-shadow:var(--shadow);animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.step:nth-child(2){animation-delay:.08s}.step:nth-child(3){animation-delay:.16s}
.step b{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;font-size:13px;color:#04140a;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 55%,var(--brand-2));margin-bottom:11px}
.step h4{margin:0 0 5px;font-size:14.5px;letter-spacing:-.01em}
.step p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.land-src{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  font-size:11.5px;color:var(--ink-2);padding-top:22px;border-top:1px solid var(--line)}
.land-src b{font-weight:560;color:var(--ink);padding:3px 10px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel-2)}

/* ============ recall monitor ============ */
.monitor{position:relative;overflow:hidden}
.mon-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.mon-head h2{margin-bottom:2px}
.mon-head .sub{margin:0}
button.small{padding:7px 14px;font-size:13px}
.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:560px){.sources{grid-template-columns:1fr}}
.src{padding:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);position:relative}
.src.checking{border-color:color-mix(in srgb,var(--brand-1) 50%,var(--line))}
.src-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.src-name{font-weight:620;font-size:13.5px;letter-spacing:-.01em}
.src-led{width:7px;height:7px;border-radius:50%;flex:none}
.led-ok{background:var(--yes);box-shadow:0 0 8px rgba(var(--yes-glow),.85);animation:pulse 2.6s infinite}
.led-warn{background:var(--maybe);box-shadow:0 0 8px rgba(var(--maybe-glow),.8)}
.src-n{font-size:24px;font-weight:720;letter-spacing:-.03em;line-height:1;
  background:linear-gradient(130deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.src-meta{font-size:11px;color:var(--ink-2);margin-top:5px;line-height:1.45}
.sweep{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line);overflow:hidden}
.sweep span{position:absolute;inset:0;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--brand-3),var(--brand-1),var(--brand-2),transparent);
  animation:slide 1.25s ease-in-out infinite}

.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:13px;padding:7px 15px;border-radius:99px;background:var(--panel-2);
  color:var(--ink-2);border:1px solid var(--line)}
.chip:hover{color:var(--ink)}
.chip.on{color:#04140a;border-color:transparent;
  background:linear-gradient(120deg,var(--brand-3),var(--brand-1) 55%,var(--brand-2))}
.feed-new{animation:flashIn .9s ease both}
@keyframes flashIn{0%{background:color-mix(in srgb,var(--brand-1) 16%,transparent)}100%{background:transparent}}

/* ============ onboarding ============ */
#onb{max-width:430px;padding:0;overflow:hidden}
.onb-bar{height:3px;background:var(--line)}
.onb-bar span{display:block;height:100%;width:0;transition:width .45s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,var(--brand-3),var(--brand-1),var(--brand-2))}
.onb-in{padding:28px 26px 24px}
.onb-in h3{font-size:20px;letter-spacing:-.02em;margin-bottom:5px}
.onb-in .sub{margin-bottom:18px}
.opts{display:grid;gap:8px;margin-bottom:18px}
.opt{text-align:left;padding:13px 15px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink);font-size:14.5px;transition:all .18s}
.opt:hover{border-color:var(--brand-1);transform:translateX(3px)}
.opt.on{border-color:var(--brand-1);background:color-mix(in srgb,var(--brand-1) 12%,var(--panel-2))}
.onb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}
.onb-skip{background:none;color:var(--ink-2);padding:8px 0;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.onb-skip:hover{color:var(--ink)}
.onb-done{text-align:center;padding:34px 26px}
.onb-done .dz-icon{margin:0 auto 14px}

/* ============ motion ============ */
.view.entering{animation:viewIn .42s cubic-bezier(.22,1,.32,1) both}
.view.leaving{animation:viewOut .17s ease-in both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px) scale(.994)}to{opacity:1;transform:none}}
@keyframes viewOut{from{opacity:1}to{opacity:0;transform:translateY(-7px)}}

/* buttons get a little life */
button,.filebtn,.opt,.chip,.step,.src{transition:transform .2s cubic-bezier(.22,1,.32,1),
  box-shadow .25s,background .25s,border-color .25s,color .2s}
.primary:hover,.ghost:hover{transform:translateY(-1.5px)}
.primary:active,.ghost:active{transform:translateY(0) scale(.975)}
.primary.big:hover{transform:translateY(-2.5px) scale(1.015)}

/* cards lift a touch on hover */
.step:hover,.src:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.match{transition:background .2s,padding-left .2s}
.match:hover{background:var(--panel-2);padding-left:8px;border-radius:8px}

/* chips */
.chip{position:relative;overflow:hidden}
.chip:active{transform:scale(.94)}

/* the answer word gets a subtle breathing glow */
.a-word{will-change:transform}
.answer:hover .a-word{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}}

/* staggered card entrances inside a view */


/* monitor numbers */
.src-n{font-variant-numeric:tabular-nums;transition:none}
.src.checking{animation:srcPulse 1.2s ease-in-out infinite}
@keyframes srcPulse{0%,100%{border-color:var(--line)}50%{border-color:color-mix(in srgb,var(--brand-1) 55%,var(--line))}}

/* onboarding options slide in one after another */
.opts .opt{animation:optIn .38s cubic-bezier(.22,1,.32,1) both}
.opts .opt:nth-child(1){animation-delay:.03s}.opts .opt:nth-child(2){animation-delay:.07s}
.opts .opt:nth-child(3){animation-delay:.11s}.opts .opt:nth-child(4){animation-delay:.15s}
.opts .opt:nth-child(5){animation-delay:.19s}.opts .opt:nth-child(6){animation-delay:.23s}
@keyframes optIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.opt.on{transform:translateX(5px) scale(1.015)}

/* tab underline glide */
.tabs button.on{animation:tabPop .3s cubic-bezier(.22,1,.32,1)}
@keyframes tabPop{from{transform:scale(.94)}to{transform:scale(1)}}

/* ---- auth dialog ---- */
.authtabs{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:3px;margin:6px 0 18px}
.authtabs button{flex:1;background:transparent;color:var(--ink-2);padding:9px;border-radius:8px;font-size:14px;font-weight:540}
.authtabs button.on{color:var(--ink);background:var(--panel);box-shadow:var(--shadow)}
.authalt{text-align:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.authalt .linky{padding:0;font-size:13px}
#magicForm{margin-top:12px}

/* ============ about ============ */
.ab-hero{text-align:center;padding:30px 0 26px}
.ab-hero h1{font-size:clamp(32px,6.6vw,52px);line-height:1.06;margin:0 0 20px;letter-spacing:-.04em;font-weight:750;
  background:linear-gradient(100deg,var(--brand-2) 0%,var(--brand-1) 18%,var(--ink) 50%,var(--brand-1) 82%,var(--brand-2) 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;animation:sheen 16s linear infinite}
.ab-hero .land-lead{margin-bottom:16px}

.ab-quote{position:relative;margin:6px 0 22px;padding:26px 26px 26px 30px;border-radius:var(--r);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--brand-1) 26%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 9%,var(--panel)),color-mix(in srgb,var(--brand-2) 7%,var(--panel)));
  box-shadow:var(--shadow)}
.ab-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-3),var(--brand-1) 50%,var(--brand-2))}
.ab-quote p{margin:0;font-size:clamp(17px,2.6vw,20px);line-height:1.5;font-weight:560;letter-spacing:-.02em;max-width:46ch}

.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
@media(max-width:660px){.ab-grid{grid-template-columns:1fr}}
.ab-cell{padding:18px 16px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);
  transition:transform .22s cubic-bezier(.22,1,.32,1),box-shadow .25s,border-color .25s}
.ab-cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand-1) 45%,var(--line));box-shadow:var(--shadow-lg)}
.ab-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;margin-bottom:11px;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 52%,var(--brand-2));
  box-shadow:0 7px 18px -8px rgba(var(--yes-glow),.75)}
.ab-ic svg{width:19px;height:19px}
.ab-cell h4{margin:0 0 5px;font-size:14.5px;letter-spacing:-.012em}
.ab-cell p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}

.ab-id{display:flex;align-items:center;gap:16px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.ab-mono{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:17px;
  font-size:20px;font-weight:720;letter-spacing:-.02em;color:#04140a;
  background:linear-gradient(135deg,var(--brand-3),var(--brand-1) 52%,var(--brand-2));
  box-shadow:0 10px 26px -10px rgba(var(--yes-glow),.8)}
.ab-idtext h3{margin:0 0 2px;font-size:19px;letter-spacing:-.025em}
.ab-role{margin:0 0 9px;font-size:13.5px;color:var(--ink-2)}
.ab-links{display:flex;flex-wrap:wrap;gap:8px}
.ab-li{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:13px;font-weight:560;
  color:var(--ink);padding:6px 13px 6px 11px;border-radius:99px;border:1px solid var(--line);background:var(--panel-2);
  transition:transform .2s cubic-bezier(.22,1,.32,1),border-color .22s,box-shadow .25s,color .2s}
.ab-li svg{width:15px;height:15px;color:var(--brand-1);transition:color .2s}
.ab-li:hover{transform:translateY(-1.5px);color:var(--ink);
  border-color:color-mix(in srgb,var(--brand-1) 55%,var(--line));
  box-shadow:0 10px 24px -12px rgba(var(--yes-glow),.85)}
.ab-li:hover svg{color:var(--brand-2)}
@media(max-width:520px){.ab-id{flex-direction:column;align-items:flex-start;gap:13px}}

.ab-bio{margin:0 0 12px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.ab-bio:last-of-type{margin-bottom:20px}

.ab-tl{position:relative;margin:4px 0 20px;padding-left:20px}
.ab-tl::before{content:"";position:absolute;left:3.5px;top:6px;bottom:6px;width:2px;border-radius:99px;
  background:linear-gradient(180deg,var(--brand-3),var(--brand-1) 45%,var(--brand-2),transparent)}
.ab-tl-item{position:relative;padding:0 0 18px}
.ab-tl-item:last-child{padding-bottom:0}
.ab-tl-item::before{content:"";position:absolute;left:-20px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--panel);border:2px solid var(--brand-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-1) 16%,transparent);
  transition:transform .22s cubic-bezier(.22,1,.32,1),box-shadow .25s}
.ab-tl-item:hover::before{transform:scale(1.25);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand-1) 20%,transparent)}
.ab-when{display:inline-block;font-size:11px;font-weight:620;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-2);font-variant-numeric:tabular-nums;margin-bottom:3px}
.ab-tl-item h4{margin:0 0 3px;font-size:14.5px;letter-spacing:-.012em}
.ab-tl-item p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:56ch}

.ab-stats{margin-top:4px}
.ab-stats .stat b{font-variant-numeric:tabular-nums}

.ab-cta{text-align:center;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-1) 8%,var(--panel)),var(--panel) 78%)}
.ab-cta h2{font-size:19px;margin-bottom:7px}
.ab-cta .sub{max-width:42ch;margin:0 auto 18px}
.ab-btnlink{display:inline-flex;align-items:center;text-decoration:none;padding:11px 20px;border-radius:11px;
  font-weight:500;color:var(--ink)}
.ab-fine{max-width:60ch;margin:0 auto;text-align:center;font-size:11.5px;line-height:1.65;color:var(--ink-2)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,1,.32,1),transform .6s cubic-bezier(.22,1,.32,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ============ scan page ============ */
.scanstrip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.scanstrip span{font-size:12px;color:var(--ink-2);padding:6px 13px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel)}
.scanstrip b{color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums}

.dz-hint{font-size:11.5px;color:var(--ink-2);opacity:.75;margin-top:2px}
.dropzone.dragging{border-color:var(--brand-1);border-style:solid;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 16%,var(--panel)),color-mix(in srgb,var(--brand-2) 12%,var(--panel)));
  transform:scale(1.012)}
.dropzone.dragging .dz-icon{animation:beat .8s ease-in-out infinite}

.tryit .sub{margin-bottom:12px}
.trychips{display:flex;flex-wrap:wrap;gap:8px}

/* the lot-code guide */
.guide .sub em{font-style:normal;color:var(--ink);font-weight:600}
.pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:640px){.pkgs{grid-template-columns:repeat(2,1fr)}}
.pkg{text-align:center;padding:16px 10px;border-radius:13px;border:1px solid var(--line);
  background:var(--panel-2);transition:transform .22s cubic-bezier(.22,1,.32,1),border-color .22s}
.pkg:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand-1) 45%,var(--line))}
.pkg svg{width:62px;height:62px;color:var(--ink-2);margin-bottom:6px}
.pkg:hover svg{color:var(--ink)}
.pkg .hot{fill:var(--brand-1);animation:hotPulse 2.4s ease-in-out infinite}
.pkg:nth-child(2) .hot{animation-delay:.3s}
.pkg:nth-child(3) .hot{animation-delay:.6s}
.pkg:nth-child(4) .hot{animation-delay:.9s}
@keyframes hotPulse{0%,100%{opacity:.55;r:3.4}50%{opacity:1;r:4.6}}
.pkg h4{margin:0 0 3px;font-size:13.5px;letter-spacing:-.01em}
.pkg p{margin:0;font-size:11.5px;color:var(--ink-2);line-height:1.45}

/* multi-stage progress while a scan runs */
.stages{display:grid;gap:2px;margin:0 auto;max-width:300px;text-align:left}
.stage-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;
  color:var(--ink-2);opacity:.4;transition:opacity .3s,color .3s}
.stage-row.active{opacity:1;color:var(--ink)}
.stage-row.done{opacity:1;color:var(--ink-2)}
.stage-dot{width:16px;height:16px;border-radius:50%;flex:none;position:relative;
  border:2px solid var(--line);transition:border-color .3s,background .3s}
.stage-row.active .stage-dot{border-color:var(--brand-1)}
.stage-row.active .stage-dot::after{content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--brand-1);animation:hotPulse 1.1s ease-in-out infinite}
.stage-row.done .stage-dot{border-color:var(--brand-1);background:var(--brand-1)}
.stage-row.done .stage-dot::after{content:"";position:absolute;inset:0;display:grid;place-items:center;
  color:#04140a;font-size:10px;font-weight:900;line-height:16px;text-align:center}

/* ---- about: avatar that follows GitHub ---- */
.ab-avatar{position:relative;flex:none;width:72px;height:72px;display:grid;place-items:center}
.ab-avatar img{width:72px;height:72px;border-radius:50%;object-fit:cover;
  border:2px solid color-mix(in srgb,var(--brand-1) 45%,var(--line));
  box-shadow:0 8px 26px -10px rgba(var(--yes-glow),.6);
  animation:pop .5s cubic-bezier(.16,1.1,.3,1) both}
.ab-avatar img:hover{border-color:var(--brand-1)}

.ab-links{display:flex;flex-wrap:wrap;gap:8px}

/* ============ pantry ============ */
.pantry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.pt-title{font-size:clamp(26px,4.6vw,36px);letter-spacing:-.03em;margin:0 0 4px;font-weight:720;
  background:linear-gradient(115deg,var(--ink) 25%,var(--brand-1) 75%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ptfilters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

.ptcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;box-shadow:var(--shadow);text-align:left;padding:0;color:var(--ink);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.ptcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.ptthumb{position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden}
.ptthumb img{width:100%;height:100%;object-fit:cover;display:block}
.ptthumb .noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-2);font-size:11.5px}
.ptbadge{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:640;letter-spacing:.04em;
  text-transform:uppercase;padding:4px 9px;border-radius:99px;backdrop-filter:blur(8px)}
.b-bad{background:color-mix(in srgb,var(--no) 88%,transparent);color:#fff}
.b-warn{background:color-mix(in srgb,var(--maybe) 88%,transparent);color:#1a1200}
.b-ok{background:color-mix(in srgb,var(--yes) 85%,transparent);color:#04140a}
.ptmeta{padding:12px 13px}
.ptmeta strong{display:block;font-size:14px;letter-spacing:-.01em}
.ptmeta span{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}

/* the annotated view */
#ptDlg{max-width:min(920px,94vw);padding:24px}
.ptdetail-head{margin-bottom:14px;padding-right:34px}
.ptdetail-head h3{font-size:20px;letter-spacing:-.02em;margin:0 0 2px}
.annot{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start}
@media(max-width:720px){.annot{grid-template-columns:1fr}}
.annot-img{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
.annot-img img{width:100%;display:block}
.annot-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.annot-box{position:absolute;border:2px solid;border-radius:5px;pointer-events:none;
  animation:boxIn .5s cubic-bezier(.16,1.1,.3,1) both}
@keyframes boxIn{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
.annot-box.s-bad{border-color:var(--no);box-shadow:0 0 0 3px color-mix(in srgb,var(--no) 26%,transparent)}
.annot-box.s-warn{border-color:var(--maybe);box-shadow:0 0 0 3px color-mix(in srgb,var(--maybe) 26%,transparent)}
.annot-box.s-ok{border-color:var(--yes);box-shadow:0 0 0 3px color-mix(in srgb,var(--yes) 22%,transparent)}
.annot-pin{position:absolute;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;transform:translate(-50%,-50%);z-index:2;
  animation:pop .45s cubic-bezier(.16,1.1,.3,1) both}
.annot-pin.s-bad{background:var(--no);color:#fff}
.annot-pin.s-warn{background:var(--maybe);color:#1a1200}
.annot-pin.s-ok{background:var(--yes);color:#04140a}

.annot-list{display:grid;gap:9px;align-content:start}
.annot-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);
  animation:rise .45s cubic-bezier(.2,.8,.2,1) both}
.annot-item:nth-child(2){animation-delay:.05s}.annot-item:nth-child(3){animation-delay:.1s}
.annot-item:nth-child(4){animation-delay:.15s}.annot-item:nth-child(5){animation-delay:.2s}
.annot-item.s-bad{border-color:color-mix(in srgb,var(--no) 45%,var(--line))}
.annot-item.s-warn{border-color:color-mix(in srgb,var(--maybe) 45%,var(--line))}
.annot-n{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.annot-n.s-bad{background:var(--no);color:#fff}
.annot-n.s-warn{background:var(--maybe);color:#1a1200}
.annot-n.s-ok{background:var(--yes);color:#04140a}
.annot-item b{display:block;font-size:13.5px;letter-spacing:-.01em}
.annot-item p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.annot-item.nobox b::after{content:" · not located";font-weight:400;color:var(--ink-2);font-size:11.5px}

.foodsearch{display:flex;gap:8px;margin-top:14px}
.foodsearch input{flex:1}
@media(max-width:520px){.foodsearch{flex-direction:column}}

/* ---- food icons where there is no photo ---- */
.foodicon{color:var(--brand-1);opacity:.9}
.a-icon{display:grid;place-items:center;width:74px;height:74px;margin:0 auto 12px;border-radius:20px;
  border:1px solid color-mix(in srgb,var(--brand-1) 34%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 13%,var(--panel)),var(--panel));
  animation:pop .5s cubic-bezier(.16,1.1,.3,1) both}
.ptthumb .foodwrap{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 9%,var(--panel-2)),var(--panel-2))}

/* ---- why this exists ---- */
.whynow{text-align:left;margin-top:34px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-1) 5%,var(--panel)),var(--panel) 70%)}
.wn-tag{display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-1);font-weight:640;margin-bottom:8px}
.whynow h2{font-size:clamp(20px,3.2vw,26px);letter-spacing:-.025em;margin-bottom:10px}
.wn-lead{color:var(--ink-2);font-size:15px;line-height:1.65;margin:0 0 20px;max-width:60ch}
.wn-lead strong{color:var(--ink);font-weight:640}

.wn-case{border-radius:13px;padding:18px;margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--maybe) 30%,var(--line));
  background:color-mix(in srgb,var(--maybe) 7%,var(--panel-2))}
.wn-case-head{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px}
.wn-dot{width:9px;height:9px;border-radius:50%;background:var(--maybe);flex:none;margin-top:5px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--maybe) 22%,transparent);animation:pulse 2.6s infinite}
.wn-case-head h4{margin:0;font-size:14.5px;letter-spacing:-.01em}
.wn-when{margin:2px 0 0;font-size:11.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.wn-case p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 10px}
.wn-case p:last-child{margin-bottom:0}
.wn-case strong{color:var(--ink);font-weight:620}
.wn-point{padding-top:11px;border-top:1px solid color-mix(in srgb,var(--maybe) 22%,var(--line));
  color:var(--ink)!important}
.wn-fine{font-size:11.5px;color:var(--ink-2);line-height:1.6;margin:0}
.wn-fine a{color:var(--brand-1);text-decoration:none}
.wn-fine a:hover{text-decoration:underline}

/* ============================================================
   SCAN MODE — once a photo is in, the page is only that photo
   ============================================================ */
#view-scan.scanning-mode #scanCard,
#view-scan.scanning-mode #tryit,
#view-scan.scanning-mode #guide,
#view-scan.scanning-mode #scanstrip { display:none }

#preview{margin:0}

/* the photo tray */
.tray{max-width:560px;margin:0 auto 20px;animation:rise .45s cubic-bezier(.2,.7,.3,1) both}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.shot{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel-2);box-shadow:var(--shadow);aspect-ratio:3/4}
/* Absolute, not a grid child: an empty slot beside it makes the row taller
   than the 3/4 box, and anything laid out in flow leaves a strip of bare card. */
.shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot-tag{position:absolute;left:8px;right:8px;bottom:8px;font-size:10.5px;font-weight:650;
  text-transform:uppercase;letter-spacing:.07em;color:#fff;padding:5px 9px;border-radius:99px;
  background:rgba(12,14,11,.62);backdrop-filter:blur(6px);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-x{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:99px;border:0;
  background:rgba(12,14,11,.62);backdrop-filter:blur(6px);color:#fff;font-size:16px;line-height:1;
  cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .15s}
.shot-x:hover{background:var(--no);transform:scale(1.08)}

.shot.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:16px 14px;text-align:center;cursor:pointer;background:var(--panel);
  border:1.5px dashed var(--line);box-shadow:none;transition:border-color .18s,background .18s,transform .18s}
.shot.empty:hover{border-color:var(--brand-1);background:var(--panel-2);transform:translateY(-2px)}
.shot.empty:disabled{opacity:.5;cursor:default;transform:none}
.shot-plus{font-size:26px;line-height:1;color:var(--brand-1);font-weight:300;margin-bottom:4px}
.shot.empty b{font-size:13.5px;letter-spacing:-.01em}
.shot.empty i{font-style:normal;font-size:11.5px;color:var(--ink-2);line-height:1.4}
.shot.empty.wanted{border-color:rgba(63,185,107,.5);border-style:solid;
  background:linear-gradient(160deg,rgba(63,185,107,.09),rgba(18,165,160,.05))}
.shot.empty.wanted::after{content:"recommended";position:absolute;top:8px;right:8px;font-size:9.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-1);
  background:var(--panel);border:1px solid rgba(63,185,107,.35);border-radius:99px;padding:3px 8px}

.tray-cta{margin-top:14px;text-align:center}
.tray-nudge{margin:0 auto 12px;max-width:440px;font-size:13px;line-height:1.55;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:12px 15px;text-align:left}
.tray-nudge b{color:var(--ink)}
.tray-cta .primary{min-width:220px}
.tray.done .shots{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));max-width:340px;margin:0 auto}
.tray.done .shot{aspect-ratio:1;opacity:.92}
.shot .prev-skel{width:100%;height:100%;aspect-ratio:auto}
.prev-skel{aspect-ratio:4/3;background:linear-gradient(100deg,var(--panel-2) 20%,var(--panel) 40%,var(--panel-2) 60%);
  background-size:220% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}

.againbar{display:flex;justify-content:center;margin:22px 0 8px}
.againbar .ghost{border-radius:99px;padding:10px 22px}

/* ============================================================
   PRODUCT IDENTITY
   ============================================================ */
.prodcard{animation:rise .5s cubic-bezier(.2,.7,.3,1) both .1s}
.pc-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.pc-ico{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:15px;
  background:linear-gradient(150deg,rgba(63,185,107,.16),rgba(18,165,160,.12));
  color:var(--brand-1);border:1px solid var(--line)}
.pc-name{margin:0;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.pc-brand{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.pc-sum{margin:0 0 12px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.pc-claims{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pc-claims span{font-size:11.5px;padding:4px 10px;border-radius:99px;font-weight:560;
  background:rgba(63,185,107,.12);color:var(--brand-1);border:1px solid rgba(63,185,107,.25)}
.pc-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pc-fact{flex:1 1 140px;min-width:0;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px}
.pc-facts dt{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);margin-bottom:2px}
.pc-facts dd{margin:0;font-size:13.5px;font-weight:560}

/* ============================================================
   HEALTH SCORE
   ============================================================ */
.health{animation:rise .5s cubic-bezier(.2,.7,.3,1) both .16s}
.health .h-head{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.health h2{margin:0;font-size:19px;letter-spacing:-.02em}
.health .h-head .sub{margin:3px 0 0;font-size:12.5px}
.h-ring{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.ring{width:104px;height:104px;overflow:visible}
.ring circle{fill:none;stroke-width:9;stroke-linecap:round;transform:rotate(-90deg);transform-origin:55px 55px}
.ring-bg{stroke:var(--line)}
.ring-fg{stroke:currentColor;animation:ringfill 1.1s cubic-bezier(.2,.8,.3,1) forwards .15s}
@keyframes ringfill{to{stroke-dashoffset:var(--to)}}
.ring-num{fill:currentColor;font-size:30px;font-weight:800;text-anchor:middle;letter-spacing:-.03em}
.ring-den{fill:var(--ink-2);font-size:11px;text-anchor:middle;font-weight:500}
.g-excellent{color:#15803d}.g-good{color:#4d9a1f}.g-fair{color:#b8791b}.g-poor{color:var(--no)}
.h-grade{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.health.g-excellent .h-grade{color:#15803d}.health.g-good .h-grade{color:#4d9a1f}
.health.g-fair .h-grade{color:#b8791b}.health.g-poor .h-grade{color:var(--no)}
.h-why{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);text-transform:lowercase}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 18px;margin:16px 0 4px}
.spec-top{display:flex;justify-content:baseline;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.spec-top span{color:var(--ink-2)}
.spec-top b{font-size:14.5px;font-weight:650}
.spec-top i{font-style:normal;font-size:11px;color:var(--ink-2);margin-left:2px}
.spec-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.spec-bar span{display:block;height:100%;width:0;border-radius:99px;background:var(--ink-2);
  animation:barfill .8s cubic-bezier(.2,.8,.3,1) forwards .25s}
@keyframes barfill{to{width:var(--w)}}
.l-good .spec-bar span{background:#3fb96b}
.l-ok   .spec-bar span{background:#d9a13a}
.l-bad  .spec-bar span{background:var(--no)}
.l-good .spec-top b{color:#15803d}
.l-bad  .spec-top b{color:var(--no)}

.h-parts{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.h-parts span{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:var(--ink-2);
  border:1px solid var(--line);border-radius:99px;padding:5px 12px;background:var(--panel-2)}
.h-parts b{font-size:13.5px;color:var(--ink);font-weight:650}
.h-total{background:var(--panel)!important;border-color:currentColor!important}
.h-total b{color:inherit}
.h-parts i{font-style:normal;opacity:.6}

.adds{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.adds h4{margin:0 0 10px;font-size:13px;letter-spacing:-.01em}
.add{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.add:last-child{border-bottom:0;padding-bottom:0}
.add-dot{width:8px;height:8px;border-radius:99px;flex:none;margin-top:6px}
.r-hazardous .add-dot{background:var(--no);box-shadow:0 0 0 4px rgba(var(--no-glow),.16)}
.r-high .add-dot{background:#d4552e}
.r-moderate .add-dot{background:#d9a13a}
.r-limited .add-dot{background:var(--ink-2)}
.add strong{font-size:13.5px}
.add em{font-style:normal;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  margin-left:8px;color:var(--ink-2)}
.r-hazardous em{color:var(--no)}.r-high em{color:#d4552e}
.add p{margin:2px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.h-clean{margin:16px 0 0;font-size:13.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}

.h-ing{margin-top:14px;font-size:13px}
.h-ing summary{cursor:pointer;color:var(--ink-2);font-weight:560;list-style:none}
.h-ing summary::-webkit-details-marker{display:none}
.h-ing summary::before{content:"› ";display:inline-block;transition:transform .2s}
.h-ing[open] summary::before{transform:rotate(90deg)}
.h-ing p{margin:8px 0 0;color:var(--ink-2);line-height:1.6}
.h-fine{margin:16px 0 0;font-size:11.5px;color:var(--ink-2);opacity:.85;line-height:1.55;
  border-top:1px solid var(--line);padding-top:12px}
.health.noscore .hint{margin-top:6px}

@media (max-width:520px){
  .health .h-head{flex-direction:row;align-items:flex-start}
  .ring{width:84px;height:84px}
}
@media (prefers-reduced-motion:reduce){
  .ring-fg{animation:none;stroke-dashoffset:var(--to)}
  .spec-bar span{animation:none;width:var(--w)}
  .prev-skel{animation:none}
}

.ptscore{position:absolute;right:8px;top:8px;min-width:28px;height:28px;padding:0 6px;border-radius:99px;
  display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#fff;
  background:currentColor;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.ptscore.g-excellent{background:#15803d;color:#fff}
.ptscore.g-good{background:#4d9a1f;color:#fff}
.ptscore.g-fair{background:#b8791b;color:#fff}
.ptscore.g-poor{background:#b3261e;color:#fff}
#ptDetail .prodcard,#ptDetail .health{margin-top:16px}

/* one marked-up photo per shot in the pantry detail view */
.annot-photos{display:flex;flex-direction:column;gap:10px}
.annot-cap{position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:650;text-transform:uppercase;
  letter-spacing:.07em;color:#fff;padding:4px 9px;border-radius:99px;
  background:rgba(12,14,11,.62);backdrop-filter:blur(6px)}
.annot-img.nophoto{border-style:dashed}

/* ============================================================
   HERO FIBER FIELD
   A WebGL field behind the landing headline. Everything here is
   built so the hero looks finished when it never starts: the
   canvas fades in only once fibers.js says it is running.
   ============================================================ */
.land{position:relative}
.land>*:not(.hero-fx){position:relative;z-index:1}

.hero-fx{position:absolute;left:50%;top:-90px;transform:translateX(-50%);
  width:min(1180px,132vw);height:620px;z-index:0;pointer-events:none;
  /* An annulus, not a disc. No hard rectangle at the edges, and the very
     centre — where the headline and lead paragraphs sit — is held back so the
     fibers frame the copy instead of running underneath it. */
  --fx-mask:radial-gradient(ellipse 64% 60% at 50% 44%,
    rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 22%, #000 42%, rgba(0,0,0,.8) 62%, transparent 82%);
  -webkit-mask-image:var(--fx-mask);mask-image:var(--fx-mask)}
/* 150vw here made the document 486px wide inside a 390px viewport, so the
   whole page scrolled sideways. The field is decorative; clipping it at the
   screen edge costs nothing. */
@media(max-width:640px){.hero-fx{height:480px;top:-70px;width:100%}}

.fibers{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease .15s}
.fibers.fibers-on{opacity:.95}
.fibers-canvas{display:block;width:100%;height:100%}

/* The shader paints its own backdrop — white in light mode, near-black in
   dark. Blending makes that backdrop a no-op instead of a pale rectangle
   sitting on the page's warm off-white, so only the fibers themselves land. */
.fibers{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
  .fibers{mix-blend-mode:screen}
  .fibers.fibers-on{opacity:.5}
}

/* Type sits on top of a moving image, so give it a floor to stand on. */
.land-badge,.land h1,.land-lead,.land .hint{text-shadow:0 1px 14px var(--bg)}
@media (prefers-color-scheme:dark){
  .land-badge,.land h1,.land-lead,.land .hint{text-shadow:0 1px 16px rgba(0,0,0,.85)}
}

@media (prefers-reduced-motion:reduce){
  .fibers{transition:none}
  .fibers.fibers-on{opacity:.3}
}

/* ============================================================
   ASCII WAVE FIELD — About page
   Deliberately near-invisible: texture you notice on the second
   visit, never something competing with the writing.
   ============================================================ */
/* A body-level layer, behind everything, shown only while About is open.
   Fixed to the viewport rather than the section: About is several screens
   tall, and a field sized to all of it would be tens of thousands of
   characters redrawn every tick to show one screenful. */
.ascii-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .55s ease;
  --ascii-mask:linear-gradient(to bottom,transparent 0%,#000 18%,rgba(0,0,0,.7) 70%,transparent 97%);
  -webkit-mask-image:var(--ascii-mask);mask-image:var(--ascii-mask)}
.ascii-bg.ascii-live{opacity:.07}
@media (prefers-color-scheme:dark){
  /* Lighter than --ink so the characters read as a soft haze rather than
     grey marks sitting on the near-black page. */
  .ascii-bg.ascii-live{opacity:.105}
  .ascii-field{color:#dfe9df}
}

.ascii-field{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;line-height:1.15;letter-spacing:0;white-space:pre;color:var(--ink);
  user-select:none;-webkit-user-select:none}

@media (prefers-reduced-motion:reduce){.ascii-bg{transition:none}}

/* ============================================================
   ONBOARDING PRELOADER — "Tailoring your experience"
   The ring tracks three real requests, one third each.
   ============================================================ */
.onb-load{text-align:center;padding:6px 2px 2px;animation:rise .4s cubic-bezier(.2,.7,.3,1) both}
.onb-load h3{margin:16px 0 4px;font-size:19px;letter-spacing:-.02em}
.onb-load .sub{margin:0 0 18px;font-size:13.5px}

.tl-ring{position:relative;width:92px;height:92px;margin:0 auto}
.tl-ring svg{width:92px;height:92px;transform:rotate(-90deg)}
.tl-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.tl-track{stroke:var(--line)}
.tl-arc{stroke:var(--brand-1);stroke-dasharray:239;stroke-dashoffset:239;
  transition:stroke-dashoffset .55s cubic-bezier(.3,.8,.3,1)}
/* Centre the pair as a unit. `align-items:baseline` sits the line box against
   the top of the box rather than the middle, which floated "100%" up over the
   ring stroke; the % is nudged instead. */
.tl-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:750;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.tl-pct b{font-size:22px;font-weight:750}
.tl-pct i{font-style:normal;font-size:11px;font-weight:600;color:var(--ink-2);
  margin-left:2px;align-self:center;transform:translateY(-3px)}

/* The ring breathes while requests are still out, so a slow network reads as
   working rather than stuck. */
.tl-ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--brand-1) 30%,transparent);
  animation:tlPulse 2.1s ease-in-out infinite}
@keyframes tlPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.06);opacity:0}}
/* Stop pulsing the moment there is nothing left to wait for. */
.tl-ring.done::after{animation:none;opacity:0}
.tl-ring.done .tl-arc{stroke:var(--yes)}
.tl-ring.done .tl-pct b{color:var(--yes)}

.onb-load .stages{text-align:left;max-width:270px;margin:0 auto}

@media (prefers-reduced-motion:reduce){
  .onb-load,.tl-arc{animation:none;transition:none}
  .tl-ring::after{animation:none;opacity:.4}
}


/* ============================================================
   ONBOARDING — a fixed frame
   Measured across the four steps, this dialog swung 557px to 293px
   tall and 430px to 324px wide, and at one step its top edge went
   past the top of the viewport. Every step now lives in the same
   box, vertically centred, so only the content changes.
   ============================================================ */
#onb{width:min(92vw,384px);max-width:none;box-sizing:border-box}
/* Sized to the tallest step (the six-option question), so the shorter ones
   sit centred in the same frame rather than shrinking it. */
#onbBody{min-height:min(504px,70vh);display:flex;flex-direction:column;justify-content:center}
#onbBody>*{width:100%}
.onb-in,.onb-done,.onb-load{margin:0}
/* Trim the six-option step to fit the same frame as the rest, rather than
   making every step as tall as the tallest one. */
#onbBody .onb-in{padding:24px 24px 20px}
#onbBody .onb-in .sub{margin-bottom:14px}
#onbBody .opts{gap:6px;margin-bottom:14px}
#onbBody .opt{padding:11px 14px}
@media(max-height:700px){#onbBody{min-height:64vh;overflow-y:auto}}

/* ============================================================
   SILK — Scan tab background
   Body level and z-index 0, for the two reasons spelled out at
   the top of this file: a .view ancestor transform would resize
   a fixed child, and z-index -1 hides under body's gradient.
   ============================================================ */
.silk-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  /* Wide: the cards are opaque and sit down the middle, so the only place
     this is ever seen is the margins — fading them was fighting the effect. */
  --silk-mask:radial-gradient(ellipse 105% 95% at 50% 40%,#000 0%,rgba(0,0,0,.92) 62%,transparent 100%);
  -webkit-mask-image:var(--silk-mask);mask-image:var(--silk-mask)}
.silk-canvas{display:block;width:100%;height:100%}

/* The shader paints its own opaque backdrop. Blending turns that backdrop into
   a no-op so only the weave lands: multiply on light (white drops out),
   screen on dark (near-black drops out). */
.silk-bg{mix-blend-mode:multiply}
.silk-bg.silk-live{opacity:.24}
@media (prefers-color-scheme:dark){
  .silk-bg{mix-blend-mode:screen}
  .silk-bg.silk-live{opacity:.48}
}
@media (prefers-reduced-motion:reduce){
  .silk-bg{transition:none}
  .silk-bg.silk-live{opacity:.18}
}

/* ============================================================
   DITHER — Recalls tab background
   Body level, z-index 0. Same two reasons as the layers above.
   ============================================================ */
.dither-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  --dither-mask:radial-gradient(ellipse 100% 92% at 50% 40%,#000 0%,rgba(0,0,0,.9) 60%,transparent 100%);
  -webkit-mask-image:var(--dither-mask);mask-image:var(--dither-mask)}
.dither-canvas{display:block;width:100%;height:100%;image-rendering:pixelated}

/* The shader paints its own opaque backdrop; blending makes that a no-op so
   only the dithered wave lands. */
.dither-bg{mix-blend-mode:multiply}
.dither-bg.dither-live{opacity:.20}
@media (prefers-color-scheme:dark){
  .dither-bg{mix-blend-mode:screen}
  .dither-bg.dither-live{opacity:.30}
}
@media (prefers-reduced-motion:reduce){
  .dither-bg{transition:none}
  .dither-bg.dither-live{opacity:.14}
}

/* ============================================================
   ACCOUNT PANEL
   ============================================================ */
#accountDlg h3{margin:0 0 2px;font-size:20px;letter-spacing:-.02em}
.acct-who{margin:0 0 16px;font-size:13.5px;color:var(--ink-2);word-break:break-all}

#accountBody .stats{margin:0 0 4px}
#accountBody .acct-row{padding:13px 0}

/* A real switch. The native checkbox was a system-blue box on an otherwise
   green page, and the label was not clickable on its own. */
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;margin:14px 0 0;
  padding:2px 0;user-select:none;-webkit-user-select:none}
.switch input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.switch-track{position:relative;flex:none;width:40px;height:23px;border-radius:99px;
  background:var(--line);transition:background .2s ease}
.switch-knob{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.3,.8,.3,1)}
.switch input:checked + .switch-track{background:var(--brand-1)}
.switch input:checked + .switch-track .switch-knob{transform:translateX(17px)}
.switch input:focus-visible + .switch-track{outline:2px solid var(--brand-1);outline-offset:3px}
.switch-text{font-size:14px;line-height:1.45}

/* Sign out is the ordinary action, export the secondary one. Both full width
   so nothing wraps to two lines in a narrow dialog. */
.acct-actions{display:grid;gap:9px;margin-top:20px}
.acct-actions .primary,.acct-actions .ghost{width:100%;text-align:center;padding:12px 18px;
  border-radius:12px;font-size:15px;text-decoration:none;display:block}
.acct-actions .ghost{border:1px solid var(--line);color:var(--ink);background:var(--panel-2)}
.acct-actions .ghost:hover{background:var(--panel);border-color:var(--brand-1)}

.acct-danger{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.acct-danger .linky{color:var(--no);font-size:13.5px;background:none;border:0;padding:4px;cursor:pointer}
.acct-danger .linky:hover{text-decoration:underline}
.acct-danger .hint{margin:2px 0 0;font-size:12px}

.src-stale{color:var(--maybe);font-weight:600}

/* ============================================================
   SHELVES — Pantry tab background
   ============================================================ */
.shelves-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  --shelves-mask:radial-gradient(ellipse 105% 95% at 50% 45%,#000 0%,rgba(0,0,0,.85) 62%,transparent 100%);
  -webkit-mask-image:var(--shelves-mask);mask-image:var(--shelves-mask)}
.shelves-canvas{display:block;width:100%;height:100%}

.shelves-bg{mix-blend-mode:multiply}
.shelves-bg.shelves-live{opacity:.11}
@media (prefers-color-scheme:dark){
  .shelves-bg{mix-blend-mode:screen}
  .shelves-bg.shelves-live{opacity:.22}
}
@media (prefers-reduced-motion:reduce){
  .shelves-bg{transition:none}
  .shelves-bg.shelves-live{opacity:.12}
}