/*
 * SmartScan 2.0 — liquid glass layer.
 * Loaded after style.css and only restyles: no markup or behaviour depends on it.
 * Remove the <link> in index.html to fall back to the previous look.
 *
 * Material rules
 *  - Real glass (live backdrop blur) is reserved for floating layers: dock, top bar, Trace hero, sheets, toast, composer.
 *  - Content panels use a lighter "frost" (translucent fill, no live blur) so long pages stay smooth on mid-range phones.
 *  - .glass-lite (slower devices, Save-Data) drops blur from everything except the dock.
 *  - .glass-solid (no backdrop-filter support) and prefers-reduced-transparency use opaque fills.
 */
:root{
  --ink:#06111d;--deep:#0a1a2c;--navy:#0f2741;
  --blue:#6cd8ff;--electric:#3aa6ff;--orange:#ff9d57;--ember:#ff7a3d;--violet:#7c8cff;
  --text:#f4f8fc;--muted:#a9bccd;--faint:#7f95aa;
  --edge:rgba(196,228,255,.13);--edge-hi:rgba(255,255,255,.22);
  --glass-tint:rgba(12,29,48,.5);
  --glass-fill:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.035) 42%,rgba(108,216,255,.045));
  --glass-blur:blur(24px) saturate(165%);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.035),inset 0 0 0 1px rgba(255,255,255,.04);
  --lift:0 22px 50px -18px rgba(0,6,16,.78),0 2px 8px rgba(0,6,16,.3);
  --frost:linear-gradient(155deg,rgba(28,58,90,.5),rgba(12,28,46,.6));
  --r-xl:30px;--r-lg:24px;--r-md:18px;--pill:999px;
  --serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* Damped springs sampled into linear(); browsers without linear() keep the cubic fallbacks below. */
  --spring:cubic-bezier(.2,1.25,.35,1);
  --soft:cubic-bezier(.22,1,.36,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring:linear(0,.056,.193,.368,.549,.716,.856,.963,1.037,1.082,1.103,1.106,1.097,1.08,1.061,1.042,1.025,1.011,1.001,.994,.99,.989,.989,.99,.992,.994,.996,.998,.999,1);
    --soft:linear(0,.069,.221,.396,.562,.701,.81,.89,.945,.98,1,1.011,1.015,1.015,1.013,1.011,1.008,1.006,1.004,1.002,1.001,1);
  }
}

/* ---------- Environment: a slow blue/orange light field behind everything ---------- */
html{background:var(--ink)}
body{background:transparent;--text:#f4f8fc;--muted:#a9bccd;--line:rgba(196,228,255,.1);--radius:var(--r-xl)}
body:before{content:'';position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 18%,rgba(58,166,255,.26),transparent 70%),
    radial-gradient(30% 26% at 82% 12%,rgba(124,140,255,.16),transparent 70%),
    radial-gradient(42% 32% at 78% 78%,rgba(255,122,61,.17),transparent 70%),
    radial-gradient(36% 30% at 18% 86%,rgba(108,216,255,.12),transparent 70%),
    linear-gradient(180deg,#081627 0%,#06111d 55%,#071321 100%);
  animation:ambient 46s ease-in-out infinite alternate;will-change:transform}
body:after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes ambient{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3%,-2%,0) rotate(4deg)}100%{transform:translate3d(-3%,2%,0) rotate(-3deg)}}

/* ---------- Type ---------- */
h1{font-weight:560;letter-spacing:-.045em}
.accent,.intro h1 .warm{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.02em;padding-right:.06em;
  background:linear-gradient(100deg,#ffd2ad 0%,var(--orange) 45%,var(--ember) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{color:rgba(143,220,255,.9);letter-spacing:.2em;font-weight:650}
.page-head h1{line-height:1.08}

/* ---------- Shared glass + frost surfaces ---------- */
.panel{background:var(--frost);border:1px solid var(--edge);border-radius:var(--r-xl);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 48px -30px rgba(0,6,16,.9)}
.trace-panel,.mobile-dock,.topbar,dialog,#toast,.composer,.desktop-nav{
  background:var(--glass-fill),var(--glass-tint);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--edge);box-shadow:var(--glass-inner),var(--lift)}

/* ---------- Top bar: transparent at rest, glass once content scrolls under it ---------- */
.topbar{position:sticky;top:0;z-index:9;max-width:none;border-color:transparent;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background .35s,box-shadow .35s,border-color .35s}
@media(min-width:901px){.topbar{padding-inline:max(40px,calc((100% - 1180px) / 2))}}
.is-scrolled .topbar{background:linear-gradient(180deg,rgba(8,20,34,.72),rgba(8,20,34,.45));-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom-color:var(--edge);box-shadow:0 10px 30px -18px rgba(0,6,16,.9)}
.topbar .pill{background:rgba(255,255,255,.05);border-color:var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.desktop-nav{position:relative;padding:5px;border-radius:var(--pill);gap:2px}
.desktop-nav a{position:relative;z-index:1;border-radius:var(--pill);transition:color .3s}
.desktop-nav.has-pill a.active{background:none;color:#fff}

/* ---------- Floating dock with a liquid indicator ---------- */
@media(max-width:900px){
  .mobile-dock{left:50%;right:auto;width:min(440px,calc(100% - 28px));transform:translateX(-50%);padding:6px;border-radius:32px;
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04)),rgba(10,25,42,.58);
    -webkit-backdrop-filter:blur(28px) saturate(185%);backdrop-filter:blur(28px) saturate(185%)}
  .mobile-dock a{position:relative;z-index:1;border-radius:26px;font-size:9.5px;letter-spacing:.01em;transition:color .3s,transform .55s var(--spring)}
  .mobile-dock.has-pill a.active{background:none;color:#fff}
  .mobile-dock a.active .icon{filter:drop-shadow(0 0 8px rgba(108,216,255,.65))}
}
.dock-pill{position:absolute;z-index:0;pointer-events:none;border-radius:26px;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.3),transparent 55%),linear-gradient(180deg,rgba(108,216,255,.34),rgba(58,166,255,.14));
  border:1px solid rgba(170,228,255,.38);box-shadow:0 0 22px rgba(108,216,255,.28),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -6px 14px rgba(58,166,255,.18)}
.desktop-nav .dock-pill{border-radius:var(--pill)}

/* ---------- Trace hero ---------- */
.trace-panel{border-radius:34px;
  background:radial-gradient(70% 45% at 50% 108%,rgba(255,122,61,.2),transparent 70%),radial-gradient(60% 50% at 50% 36%,rgba(108,216,255,.16),transparent 70%),var(--glass-fill),rgba(10,26,44,.46)}
.trace-panel:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 26%,transparent 74%,rgba(255,157,87,.07))}
.trace-top .pill{background:rgba(255,255,255,.06)}

/* ---------- Controls ---------- */
.btn{border-radius:var(--pill);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);letter-spacing:.005em}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(108,216,255,.4)}
.btn.primary{color:#2a1608;border:0;background:radial-gradient(120% 120% at 50% -20%,#ffd3ae 0%,transparent 55%),linear-gradient(180deg,#ffae72,#ff8a45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(190,70,10,.25),0 10px 30px -8px rgba(255,122,61,.55)}
.btn.primary:hover{background:radial-gradient(120% 120% at 50% -20%,#ffe0c6 0%,transparent 55%),linear-gradient(180deg,#ffbb86,#ff9654)}
.btn.blue{background:linear-gradient(180deg,rgba(108,216,255,.2),rgba(108,216,255,.07));border-color:rgba(108,216,255,.35);color:#bdeeff}
.icon-btn{transition:background .25s,color .25s,transform .55s var(--spring)}
.icon-btn:hover{background:rgba(255,255,255,.08)}
.pill{border-color:var(--edge);background:rgba(255,255,255,.04)}
.pill.orange{background:rgba(255,157,87,.1);border-color:rgba(255,157,87,.3)}
.chip,.prompt{border-radius:var(--pill);border-color:var(--edge);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .25s,color .25s,border-color .25s,transform .55s var(--spring)}
.chip.active{color:#fff;border-color:rgba(108,216,255,.45);background:linear-gradient(180deg,rgba(108,216,255,.3),rgba(58,166,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 18px rgba(108,216,255,.18)}
.prompt{padding:10px 16px}
.stepper{border-radius:var(--pill);border-color:var(--edge);background:rgba(4,14,26,.35)}
.field{border-radius:var(--r-md);background:rgba(4,14,26,.42);border-color:var(--edge);box-shadow:inset 0 2px 6px rgba(0,0,0,.25);transition:border-color .25s,box-shadow .25s}
.field:focus{border-color:rgba(108,216,255,.55);box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 0 0 4px rgba(108,216,255,.12)}
.search-wrap .field{border-radius:var(--pill)}
.composer{border-radius:var(--pill);padding:6px 6px 6px 10px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(6,18,32,.55)}
.composer .send{border-radius:50%;background:linear-gradient(180deg,#ffae72,#ff8a45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px -6px rgba(255,122,61,.6)}
.shopping-row input{border-radius:50%;border-color:rgba(108,216,255,.45);transition:background .3s,transform .55s var(--spring)}
.shopping-row input:checked{background:linear-gradient(180deg,#8fe3ff,var(--electric));transform:scale(1.06)}

/* ---------- Content ---------- */
.food-art{border-radius:16px;background:radial-gradient(80% 70% at 50% 25%,rgba(150,200,240,.2),rgba(120,160,200,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.food-art.big{border-radius:22px;background:radial-gradient(60% 60% at 50% 55%,rgba(108,216,255,.14),transparent 70%),radial-gradient(70% 50% at 50% 110%,rgba(255,157,87,.12),transparent 70%),rgba(7,20,34,.7)}
.item-card,.recipe-card,.scan-choice{transition:transform .55s var(--spring),border-color .3s,box-shadow .3s}
.item-card:hover,.recipe-card:hover,.scan-choice:hover{border-color:rgba(108,216,255,.28)}
.scan-choice img{border-radius:var(--r-xl) var(--r-xl) 0 0}
.scan-preview{border-radius:var(--r-xl);box-shadow:var(--lift)}
.item-card .soon{display:block;margin-top:3px}
.count-tile strong{font-weight:450;letter-spacing:-.03em}
.message{border-radius:22px 22px 22px 8px;background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.025)),rgba(12,32,52,.5);border-color:var(--edge)}
.message.user{border-radius:22px 22px 8px 22px;background:linear-gradient(160deg,rgba(108,216,255,.18),rgba(58,166,255,.08));border-color:rgba(108,216,255,.25)}
.smart-tag{box-shadow:0 30px 60px -10px rgba(0,0,0,.55),inset 0 2px 2px rgba(255,255,255,.6)}

/* ---------- Sheets and toast ---------- */
dialog{border-radius:32px;background:var(--glass-fill),rgba(10,26,44,.72);-webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%)}
dialog[open]{animation:sheet-in .6s var(--spring)}
dialog::backdrop{background:rgba(2,9,17,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(max-width:900px){dialog{margin:auto auto max(12px,env(safe-area-inset-bottom));border-radius:30px}}
@keyframes sheet-in{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}
#toast{border-radius:var(--pill);color:#eaf6ff;transition:opacity .3s,transform .55s var(--spring)}

/* ---------- Motion ---------- */
button,a.btn,.chip,.prompt,.mobile-dock a,.item-card,.recipe-card,.scan-choice{transition-property:background,color,border-color,box-shadow,transform;transition-duration:.25s,.25s,.25s,.25s,.55s;transition-timing-function:ease,ease,ease,ease,var(--spring)}
button:active,a.btn:active,.chip:active,.prompt:active,.mobile-dock a:active,.item-card:active,.recipe-card:active,.scan-choice:active{transform:scale(.955);transition-duration:.08s}
.mobile-dock a:active{transform:scale(.9)}
.shell.fade-in{animation:none}
.shell.route-enter>*{animation:rise .62s var(--soft) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.intro.fade-in{animation:rise .8s var(--soft) backwards}

/* ---------- Fallbacks ---------- */
.glass-lite .trace-panel,.glass-lite .topbar,.glass-lite dialog,.glass-lite #toast,.glass-lite .composer,.glass-lite .desktop-nav,.glass-lite .topbar .pill{-webkit-backdrop-filter:none;backdrop-filter:none}
.glass-lite .trace-panel{background:radial-gradient(70% 45% at 50% 108%,rgba(255,122,61,.18),transparent 70%),linear-gradient(155deg,#15324f,#0c2035)}
.glass-lite dialog{background:linear-gradient(155deg,#16314d,#0d2136)}
.glass-lite .shell.route-enter>*{animation-name:rise-lite}
@keyframes rise-lite{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.glass-solid .trace-panel,.glass-solid .mobile-dock,.glass-solid dialog,.glass-solid #toast,.glass-solid .composer,.glass-solid .desktop-nav,.glass-solid.is-scrolled .topbar{background:linear-gradient(155deg,#16314d,#0d2136)}
@media(prefers-reduced-transparency:reduce){
  .trace-panel,.mobile-dock,dialog,#toast,.composer,.desktop-nav,.is-scrolled .topbar,.panel{background:#10233a;-webkit-backdrop-filter:none;backdrop-filter:none}
  body:after{display:none}
}
@media(prefers-reduced-motion:reduce){body:before{animation:none}.shell.route-enter>*,dialog[open],.intro.fade-in{animation:none}}
@media(prefers-contrast:more){:root{--edge:rgba(220,240,255,.4)}.panel,.trace-panel,.mobile-dock,dialog{background:#0d2035}}

/* =====================================================================
 * Depth pass (Nov 8): thicker glass, specular rims, finger-following light.
 * Same colours; more light for the glass to bend.
 * ===================================================================== */
:root{
  --rim:linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.1) 28%,rgba(255,255,255,.03) 55%,rgba(255,170,110,.22) 100%);
  --rim-soft:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.05) 35%,rgba(255,255,255,.02) 60%,rgba(255,170,110,.14));
  --spec:radial-gradient(260px circle at var(--mx,22%) var(--my,-30%),rgba(255,255,255,.16),transparent 62%);
  --slab:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 22px 34px -28px rgba(255,255,255,.22),inset 0 -26px 40px -30px rgba(0,8,20,.55);
}
/* stronger, larger light fields behind the glass */
body:before{background:
  radial-gradient(34% 26% at 18% 16%,rgba(58,166,255,.38),transparent 70%),
  radial-gradient(26% 22% at 86% 10%,rgba(124,140,255,.24),transparent 70%),
  radial-gradient(40% 30% at 82% 74%,rgba(255,122,61,.28),transparent 70%),
  radial-gradient(30% 24% at 12% 84%,rgba(108,216,255,.2),transparent 70%),
  radial-gradient(22% 18% at 50% 46%,rgba(255,180,120,.08),transparent 70%),
  linear-gradient(180deg,#081627 0%,#06111d 55%,#071321 100%)}

/* content panels: real frosted glass with a specular rim (lite devices keep the flat frost) */
.panel{border:1px solid transparent;
  background:var(--spec) padding-box,linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 50%,rgba(108,216,255,.03)) padding-box,linear-gradient(155deg,rgba(24,52,82,.5),rgba(10,24,40,.55)) padding-box,var(--rim-soft) border-box;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--slab),0 28px 50px -30px rgba(0,6,16,.95)}
.item-card:hover,.recipe-card:hover,.scan-choice:hover{border-color:transparent;box-shadow:var(--slab),0 0 0 1px rgba(108,216,255,.22),0 30px 54px -28px rgba(0,6,16,.95)}
.glass-lite .panel{-webkit-backdrop-filter:none;backdrop-filter:none}

/* floating layers: thicker slab + bright rim */
.mobile-dock,.trace-panel,dialog,.desktop-nav,.composer,#toast{border:1px solid transparent;box-shadow:var(--slab),var(--lift)}
@media(max-width:900px){.mobile-dock{background:var(--spec) padding-box,linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(255,157,87,.05)) padding-box,linear-gradient(rgba(10,25,42,.5),rgba(10,25,42,.5)) padding-box,var(--rim) border-box;
  box-shadow:var(--slab),0 24px 50px -16px rgba(0,6,16,.85),0 0 40px -12px rgba(108,216,255,.25)}}
.trace-panel{background:var(--spec) padding-box,radial-gradient(70% 45% at 50% 108%,rgba(255,122,61,.24),transparent 70%) padding-box,radial-gradient(60% 50% at 50% 36%,rgba(108,216,255,.18),transparent 70%) padding-box,linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 45%) padding-box,linear-gradient(rgba(10,26,44,.42),rgba(10,26,44,.42)) padding-box,var(--rim) border-box}
dialog{background:var(--spec) padding-box,linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 50%) padding-box,linear-gradient(rgba(10,26,44,.66),rgba(10,26,44,.66)) padding-box,var(--rim) border-box}
.desktop-nav,.composer,#toast{background:var(--spec) padding-box,linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)) padding-box,linear-gradient(rgba(10,26,44,.55),rgba(10,26,44,.55)) padding-box,var(--rim-soft) border-box}
.btn{border:1px solid transparent;background:var(--spec) padding-box,linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)) padding-box,linear-gradient(rgba(12,30,50,.35),rgba(12,30,50,.35)) padding-box,var(--rim-soft) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px -12px rgba(0,6,16,.8)}
.btn:hover{border-color:transparent;background:var(--spec) padding-box,linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05)) padding-box,linear-gradient(rgba(12,30,50,.35),rgba(12,30,50,.35)) padding-box,var(--rim) border-box}
.btn.primary{background:radial-gradient(140% 120% at 30% -30%,rgba(255,236,220,.9) 0%,transparent 45%),linear-gradient(180deg,#ffae72,#ff8a45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 8px rgba(190,70,10,.3),inset 0 10px 16px -10px rgba(255,255,255,.5),0 12px 32px -8px rgba(255,122,61,.6)}
.glass-solid .panel,.glass-solid .btn{background:linear-gradient(155deg,#16314d,#0d2136) padding-box,var(--rim-soft) border-box}
@media(prefers-reduced-transparency:reduce){.panel,.btn,.mobile-dock,.trace-panel,dialog{background:#10233a;border:1px solid var(--edge)}}

/* liquid indicator: glint as it lands */
.dock-pill:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0;opacity:0}
.dock-pill.glint:after{animation:glint .9s var(--soft) .15s}
@keyframes glint{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-40% 0}}

/* sheets stretch, settle and retract */
dialog[open]{transform-origin:50% 100%;animation:sheet-in .7s var(--spring)}
@keyframes sheet-in{0%{opacity:0;transform:translateY(40px) scale(.96,.92)}55%{opacity:1;transform:translateY(-4px) scale(1.012,1.03)}100%{transform:none}}
dialog.closing{animation:sheet-out .22s cubic-bezier(.4,0,1,1) forwards}
dialog.closing::backdrop{opacity:0;transition:opacity .22s}
@keyframes sheet-out{to{opacity:0;transform:translateY(28px) scale(.97,.94)}}

/* list changes: new items rise in (FLIP in motion.js moves the rest) */
.flip-in{animation:flip-in .55s var(--spring) backwards}
@keyframes flip-in{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* Trace opening: the orb blooms into the conversation */
.shell.route-enter .assistant-layout .orb-wrap{animation:orb-bloom .9s var(--spring) backwards}
@keyframes orb-bloom{from{opacity:0;transform:scale(.72);filter:blur(10px) brightness(1.6)}to{opacity:1;transform:none;filter:none}}

/* =====================================================================
 * Waste Pulse
 * ===================================================================== */
#pulse-scene{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1s ease;pointer-events:none}
#pulse-scene.on{opacity:1}
.pulse-on body:before{opacity:0;transition:opacity 1s}
.pulse{max-width:760px;margin:0 auto;display:grid;gap:18px}
.pulse-hero{text-align:center;padding-top:clamp(8px,4vh,40px)}
.pulse-hero h1{font-size:clamp(34px,6vw,58px);line-height:1.04;text-shadow:0 2px 30px rgba(0,8,20,.6)}
.pulse-lede{color:#c6d6e4;margin:14px auto 0;max-width:460px;font-size:15px;text-shadow:0 1px 20px rgba(0,8,20,.8)}
.pulse-counter{display:grid;justify-items:center;gap:6px;width:100%;padding:26px 20px 18px;border-radius:36px;text-align:center;color:var(--text);border:1px solid transparent;
  background:var(--spec) padding-box,radial-gradient(80% 60% at 50% 120%,rgba(120,230,170,.14),transparent 70%) padding-box,radial-gradient(70% 60% at 50% -20%,rgba(108,216,255,.16),transparent 70%) padding-box,linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 55%) padding-box,linear-gradient(rgba(8,22,38,.38),rgba(8,22,38,.38)) padding-box,var(--rim) border-box;
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:var(--slab),0 30px 70px -24px rgba(0,6,16,.9)}
.pulse-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9fe3ff;font-weight:650}
.pulse-number{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:10px;font-size:clamp(40px,12.5vw,88px);font-weight:300;letter-spacing:-.045em;line-height:1.05;font-variant-numeric:tabular-nums}
#pulse-digits{color:#eef9ff;white-space:nowrap;text-shadow:0 0 30px rgba(108,216,255,.35)}
#pulse-digits .dg{display:inline-block}
#pulse-digits .dg.roll{animation:roll .42s var(--soft)}
@keyframes roll{from{opacity:.55;transform:translateY(-.22em);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}
.pulse-unit{font-size:.26em;letter-spacing:0;color:var(--muted);font-weight:500}
.pulse-rate{font-size:13px;color:#c6d6e4}
.pulse-estimate{font-size:11px;color:var(--orange);letter-spacing:.02em}
.pulse-more{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;color:var(--blue)}
.pulse-more .icon{width:15px;height:15px;transform:rotate(90deg);transition:transform .5s var(--spring)}
.pulse-counter[aria-expanded="true"] .pulse-more .icon{transform:rotate(-90deg)}
.pulse-detail{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-6px) scale(.985);transition:grid-template-rows .6s var(--spring),opacity .35s,transform .6s var(--spring)}
.pulse-detail.open{grid-template-rows:1fr;opacity:1;transform:none}
.pulse-detail-inner{overflow:hidden;min-height:0;border-radius:30px;padding:0 22px;border:1px solid transparent;
  background:var(--spec) padding-box,linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)) padding-box,linear-gradient(rgba(8,22,38,.55),rgba(8,22,38,.55)) padding-box,var(--rim-soft) border-box;
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);box-shadow:var(--slab);transition:padding .6s var(--spring)}
.pulse-detail.open .pulse-detail-inner{padding:22px}
.pulse-detail h3{font-size:15px;margin:20px 0 6px}
.pulse-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pulse-stats div{padding:14px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.pulse-stats strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em}
.pulse-stats span{font-size:11px;color:var(--muted)}
.pulse-sectors{display:grid;gap:12px;margin-top:18px}
.pulse-sector{font-size:12px;color:#c6d6e4}
.pulse-bar{display:block;height:8px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.pulse-bar span{display:block;height:100%;width:0;border-radius:inherit;transition:width 1.1s var(--soft) .15s}
.pulse-detail.open .pulse-bar span{width:var(--w)}
.pulse-sector.household .pulse-bar span{background:linear-gradient(90deg,#ff8a45,#ffb27a)}
.pulse-sector.service .pulse-bar span{background:linear-gradient(90deg,#3aa6ff,#8fe3ff)}
.pulse-sector.retail .pulse-bar span{background:linear-gradient(90deg,#4fc79a,#9ff0c8)}
.pulse-note{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.7}
.pulse-sources{font-size:12px;margin:16px 0 0;color:var(--muted)}
.pulse-sources a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.pulse-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:10.5px;color:#9db2c6;text-align:center;margin:0}
.pulse-status.fresh{color:#8ff0c4}.pulse-status.offline,.pulse-status.unreachable{color:var(--orange)}
.pulse-home h2{font-size:21px;margin:4px 0 8px}
.pulse-home p{font-size:13px;margin:0 0 8px}
.pulse-recipes{display:flex;flex-wrap:wrap;gap:8px}
.pulse .bottom-note{margin-top:4px}
.pulse-card{display:block;margin-bottom:16px;border:1px solid transparent;
  background:var(--spec) padding-box,radial-gradient(70% 90% at 100% 100%,rgba(120,230,170,.16),transparent 70%) padding-box,radial-gradient(60% 80% at 0% 0%,rgba(255,157,87,.16),transparent 70%) padding-box,linear-gradient(155deg,rgba(24,52,82,.5),rgba(10,24,40,.55)) padding-box,linear-gradient(140deg,rgba(255,170,110,.55),rgba(255,255,255,.08) 40%,rgba(120,230,170,.45)) border-box}
.pulse-card h2{margin:18px 0 6px;font-size:26px}
.pulse-card p{font-size:13px;margin:0 0 12px}
.pulse-card .icon{color:#9ff0c8;width:26px;height:26px}
.shell.route-enter .pulse>*{animation:rise .8s var(--soft) backwards}
.shell.route-enter .pulse>*:nth-child(2){animation-delay:.12s}.shell.route-enter .pulse>*:nth-child(3){animation-delay:.2s}.shell.route-enter .pulse>*:nth-child(4){animation-delay:.26s}.shell.route-enter .pulse>*:nth-child(5){animation-delay:.32s}
@media(max-width:900px){.pulse-counter{padding:22px 14px 16px;border-radius:32px}.pulse-stats strong{font-size:17px}}
.glass-lite .pulse-counter,.glass-lite .pulse-detail-inner{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(20,44,70,.85),rgba(8,22,38,.88))}
@media(prefers-reduced-motion:reduce){#pulse-scene{transition:none}.pulse-detail,.pulse-bar span,.pulse-detail-inner{transition:none}}

/* Trace: what actually happened, and where the answer came from */
.chat-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chat-action{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:11.5px;color:#d9fbe9;background:linear-gradient(180deg,rgba(120,230,170,.2),rgba(120,230,170,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(120,230,170,.28);animation:flip-in .55s var(--spring) backwards}
.chat-action .icon{width:14px;height:14px;color:#8ff0c4}
.msg-source{display:block;margin-top:8px;font-size:10px;letter-spacing:.06em;color:#8fb3cc}
.msg-source.warn{color:var(--orange)}

/* ===== Nov 8: Try Trace intro, live-question counter, listening bar ===== */
dialog::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(2,9,17,.72)}
.composer[hidden]{display:none}
.try-trace{position:relative;margin-top:18px;padding:22px 20px 18px;border-radius:30px;border:1px solid transparent;background:radial-gradient(90% 70% at 50% 0%,rgba(108,216,255,.18),transparent 70%) padding-box,radial-gradient(70% 60% at 50% 120%,rgba(255,122,61,.16),transparent 70%) padding-box,linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02)) padding-box,linear-gradient(rgba(10,26,44,.6),rgba(10,26,44,.6)) padding-box,var(--rim) border-box;box-shadow:var(--slab);text-align:center;animation:flip-in .6s var(--spring) backwards}
.tt-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tt-top .eyebrow{margin:0}
.tt-dots{display:flex;gap:5px}.tt-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}.tt-dots i.done{background:#8ff0c4}.tt-dots i.on{background:var(--orange);box-shadow:0 0 10px rgba(255,157,87,.8)}
.tt-say{margin:16px 0 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tt-phrase{display:block;width:100%;padding:14px 10px;font-family:var(--serif);font-style:italic;font-size:clamp(21px,5.6vw,27px);line-height:1.3;color:#fff;border-radius:22px;text-shadow:0 0 24px rgba(108,216,255,.35)}
.tt-actions{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:8px}
.tt-mic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#2a1608;background:radial-gradient(120% 120% at 30% -20%,#ffe2c9,transparent 50%),linear-gradient(180deg,#ffae72,#ff8a45);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 30px -8px rgba(255,122,61,.7)}.tt-mic .icon{width:26px;height:26px}
.tt-note{margin:12px 0 0;font-size:11px;color:var(--muted)}
.live-left{margin:16px 0 0;font-size:12px;color:var(--muted);text-align:center}.live-left b{color:#fff;font-size:14px}
.trace-ended{margin-top:18px;padding:20px;border-radius:26px;text-align:center;background:rgba(255,157,87,.08);box-shadow:0 0 0 1px rgba(255,157,87,.3)}.trace-ended strong{display:block;font-size:17px}.trace-ended p{margin:8px 0 0;font-size:13px;color:var(--muted)}
#listen-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(calc(14px + env(safe-area-inset-bottom)),calc(var(--host-badge,0px) + 6px));width:min(460px,calc(100% - 24px));z-index:60;padding:16px 16px 14px;border-radius:28px;background:linear-gradient(160deg,#1a3858,#0d2136);box-shadow:0 0 0 1px rgba(160,220,255,.28),0 24px 60px -12px rgba(0,0,0,.8);animation:flip-in .45s var(--spring) backwards}
.lb-top{display:flex;align-items:center;gap:10px;font-size:13px;color:#bfe9ff}.lb-dot{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(255,157,87,.7);animation:lb-pulse 1.2s ease-out infinite}
@keyframes lb-pulse{to{box-shadow:0 0 0 12px rgba(255,157,87,0)}}
.lb-text{margin:10px 2px 12px;font-size:18px;line-height:1.4;color:#fff;min-height:26px}
.lb-actions{display:flex;gap:10px}.lb-actions .btn{flex:1}
#listen-bar.lb-error .lb-dot{animation:none;background:#ff7a3d}#listen-bar.lb-error .lb-top{color:#ffc9a6}
@media(prefers-reduced-motion:reduce){.lb-dot{animation:none}}