/* ==================================================================
   IDEAL AI — SIGNATURE VISUAL LANGUAGE  (shared design foundation)
   "Glass panels floating over living water."
   Ported from planning/team-app-visual-prototype.html (2026-07-07 spec).
   Self-contained / CSP-safe: no external fonts, scripts, images or fetches.
   This is the FOUNDATION stylesheet. Phase 1 links it only from the
   Control Center (index.html); later phases link it per page as each is
   reskinned. It brings: design tokens, living-water background, glass
   material (curved edges / directional edge-lighting / moving glint),
   blue-gradient etched numerals, LED status lights, the Personalize
   sheet + light/dark/black modes, and the press/touch tactile layer.
   Companion runtime: glass.js.
   ================================================================== */
:root{
  --aqua:#00d2ff;--aqua-2:#5ee4ff;--aqua-deep:#0aa6d6;--blue:#188bf6;--blue-deep:#1170b8;--blue-ink:#0c6fd4;
  --grad:linear-gradient(112deg,#00d2ff 0%,#25a6f7 55%,#188bf6 100%);
  --grad-soft:linear-gradient(120deg,rgba(0,210,255,.16),rgba(37,166,247,.12) 55%,rgba(24,139,246,.10));
  --ok:#10d99a;--warn:#ffb020;--danger:#ff4d63;
  --disp:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-display:46px;--f-h1:30px;--f-h2:20px;--f-h3:16px;--f-body:15px;--f-sm:13px;--f-xs:11px;--lh:1.5;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--pill:100px;
  --dur-fast:130ms;--dur:240ms;--dur-slow:560ms;--ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.4,.5,1);
  /* ONE shared directional light source (upper-right default); updated live by glass.js parallax */
  --lx:.55;--ly:.72;--l-angle:217deg;
}
:root,[data-theme="light"]{
  --ink:#08243f;--ink-2:#284a66;--muted:#4d6a86;--faint:#7f93ad;
  --glass:rgba(246,251,255,.44);--glass-2:rgba(246,251,255,.30);
  --glass-border:rgba(255,255,255,.18);--glass-rim:rgba(255,255,255,1);
  --txt-scrim:0 0 4px rgba(255,255,255,.62),0 0 1px rgba(255,255,255,.5);
  --e1:-2px 3px 8px rgba(26,84,150,.10);
  --e2:-3px 5px 13px rgba(26,84,150,.12);
  --e3:-6px 9px 22px rgba(26,84,150,.14);
  --e4:-10px 15px 36px rgba(26,84,150,.17);
  --edge:0 0 0 .6px rgba(16,52,96,.20),0 1.5px 3px rgba(16,52,96,.15),0 0 6px rgba(140,225,255,.18);
  --rim:
    inset 0 1.4px 2.4px rgba(255,255,255,calc(.08 + .46*max(0,var(--ly)))),
    inset 0 1.4px 1.6px rgba(16,52,92,calc(.02 + .18*max(0,calc(var(--ly)*-1)))),
    inset -1.3px 0 2.4px rgba(255,255,255,calc(.04 + .44*max(0,var(--lx)))),
    inset -1.3px 0 1.6px rgba(16,52,92,calc(.01 + .20*max(0,calc(var(--lx)*-1)))),
    inset 1.3px 0 2.4px rgba(255,255,255,calc(.04 + .42*max(0,calc(var(--lx)*-1)))),
    inset 1.3px 0 1.6px rgba(16,52,92,calc(.02 + .20*max(0,var(--lx)))),
    inset 0 -1.2px 1.6px rgba(16,52,92,calc(.03 + .22*max(0,var(--ly))));
  --rim-sm:
    inset 0 1.1px 1.8px rgba(255,255,255,calc(.07 + .42*max(0,var(--ly)))),
    inset 0 1.1px 1.2px rgba(16,52,92,calc(.02 + .15*max(0,calc(var(--ly)*-1)))),
    inset -1.1px 0 1.8px rgba(255,255,255,calc(.04 + .40*max(0,var(--lx)))),
    inset 1.1px 0 1.8px rgba(255,255,255,calc(.04 + .38*max(0,calc(var(--lx)*-1)))),
    inset 0 -1.1px 1.2px rgba(16,52,92,calc(.03 + .18*max(0,var(--ly))));
  --curve:
    inset 0 3px 2.6px -1px rgba(255,255,255,calc(.12 + .58*max(0,var(--ly)))),
    inset -2.6px 1.2px 2.6px -1px rgba(255,255,255,calc(.06 + .56*max(0,var(--lx)))),
    inset 2.6px 1.2px 2.6px -1px rgba(255,255,255,calc(.06 + .52*max(0,calc(var(--lx)*-1)))),
    inset -2.1px 0 2px -1px rgba(16,52,96,calc(.05 + .24*max(0,calc(var(--lx)*-1)))),
    inset 2.1px 0 2px -1px rgba(16,52,96,calc(.06 + .24*max(0,var(--lx)))),
    inset 0 -2.6px 2.6px -1.3px rgba(16,52,96,calc(.09 + .30*max(0,var(--ly))));
  --curve-sm:
    inset 0 2.3px 1.9px -.8px rgba(255,255,255,calc(.11 + .54*max(0,var(--ly)))),
    inset -1.9px .9px 1.9px -.9px rgba(255,255,255,calc(.06 + .52*max(0,var(--lx)))),
    inset 1.9px .9px 1.9px -.9px rgba(255,255,255,calc(.06 + .48*max(0,calc(var(--lx)*-1)))),
    inset 0 -1.9px 1.9px -1px rgba(16,52,96,calc(.08 + .26*max(0,var(--ly))));
  --inner-top:rgba(255,255,255,.14);
  --line:rgba(12,44,80,.12);--line-2:rgba(12,44,80,.2);
  --sheen:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.06) 52%);
  --glow:0 10px 34px rgba(0,180,240,.34);
  --num-grad:linear-gradient(180deg,#0a396b,#188bf6);--blur:11px;
  --liquid:linear-gradient(115deg,#8fefff 0%,#17a8e8 20%,#1f8bf6 40%,#aef4ff 56%,#0aa6d6 76%,#3aa6f7 100%);
  --liquid-sh:calc(var(--lx)*1px) calc(max(0,var(--ly))*-1px) 0 rgba(255,255,255,.5),calc(var(--lx)*-1px) calc(max(0,var(--ly))*1.4px) 4px rgba(12,60,120,.22),0 0 16px rgba(0,200,255,.26);
  --liquid-etch:var(--liquid);
  --liquid-sh-etch:none;
}
[data-theme="dark"]{
  --ink:#eaf3ff;--ink-2:#b7c4d6;--muted:#8494a8;--faint:#5f708a;
  --glass:rgba(16,24,40,.30);--glass-2:rgba(16,24,40,.40);
  --glass-border:rgba(255,255,255,.14);--glass-rim:rgba(255,255,255,.20);
  --txt-scrim:0 0 5px rgba(4,10,20,.6),0 0 1px rgba(4,10,20,.5);
  --e1:-2px 3px 8px rgba(0,0,0,.35);
  --e2:-3px 5px 14px rgba(0,0,0,.42);
  --e3:-6px 10px 24px rgba(0,0,0,.5);
  --e4:-10px 16px 40px rgba(0,0,0,.55);
  --edge:0 0 0 .6px rgba(190,240,255,.28),0 0 9px rgba(0,200,255,.20);
  --rim:
    inset 0 1.4px 2.4px rgba(210,245,255,calc(.03 + .34*max(0,var(--ly)))),
    inset 0 1.4px 1.6px rgba(0,0,0,calc(.06 + .30*max(0,calc(var(--ly)*-1)))),
    inset -1.3px 0 2.4px rgba(210,245,255,calc(.02 + .30*max(0,var(--lx)))),
    inset -1.3px 0 1.6px rgba(0,0,0,calc(.06 + .30*max(0,calc(var(--lx)*-1)))),
    inset 1.3px 0 2.4px rgba(210,245,255,calc(.02 + .28*max(0,calc(var(--lx)*-1)))),
    inset 1.3px 0 1.6px rgba(0,0,0,calc(.08 + .30*max(0,var(--lx)))),
    inset 0 -1.2px 1.6px rgba(0,0,0,calc(.10 + .34*max(0,var(--ly))));
  --rim-sm:
    inset 0 1.1px 1.8px rgba(210,245,255,calc(.03 + .30*max(0,var(--ly)))),
    inset -1.1px 0 1.8px rgba(210,245,255,calc(.02 + .26*max(0,var(--lx)))),
    inset 1.1px 0 1.8px rgba(210,245,255,calc(.02 + .24*max(0,calc(var(--lx)*-1)))),
    inset 0 -1.1px 1.2px rgba(0,0,0,calc(.10 + .30*max(0,var(--ly))));
  --curve:
    inset 0 3px 2.6px -1px rgba(210,245,255,calc(.08 + .48*max(0,var(--ly)))),
    inset -2.6px 1.2px 2.6px -1px rgba(210,245,255,calc(.05 + .44*max(0,var(--lx)))),
    inset 2.6px 1.2px 2.6px -1px rgba(210,245,255,calc(.04 + .40*max(0,calc(var(--lx)*-1)))),
    inset -2.1px 0 2px -1px rgba(0,0,0,calc(.06 + .32*max(0,calc(var(--lx)*-1)))),
    inset 2.1px 0 2px -1px rgba(0,0,0,calc(.08 + .32*max(0,var(--lx)))),
    inset 0 -2.6px 2.6px -1.3px rgba(0,0,0,calc(.14 + .40*max(0,var(--ly))));
  --curve-sm:
    inset 0 2.3px 1.9px -.8px rgba(210,245,255,calc(.06 + .42*max(0,var(--ly)))),
    inset -1.9px .9px 1.9px -.9px rgba(210,245,255,calc(.05 + .38*max(0,var(--lx)))),
    inset 1.9px .9px 1.9px -.9px rgba(210,245,255,calc(.04 + .34*max(0,calc(var(--lx)*-1)))),
    inset 0 -1.9px 1.9px -1px rgba(0,0,0,calc(.12 + .40*max(0,var(--ly))));
  --inner-top:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.18);
  --sheen:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 46%);
  --glow:0 12px 44px rgba(0,210,255,.5);--num-grad:linear-gradient(180deg,#fff,#6fe6ff);--blur:13px;
  --liquid:linear-gradient(115deg,#c6f7ff 0%,#3ccdff 28%,#5aa6ff 55%,#d2f2ff 76%,#37cbff 100%);
  --liquid-sh:calc(var(--lx)*1px) calc(max(0,var(--ly))*-1px) 0 rgba(255,255,255,.22),calc(var(--lx)*-1px) calc(max(0,var(--ly))*1.4px) 5px rgba(0,0,0,.4),0 0 22px rgba(0,210,255,.5);
  --liquid-etch:var(--liquid);
  --liquid-sh-etch:none;
}

/* ===== BASE ===== */
*{-webkit-tap-highlight-color:transparent}
.gz-body{font-family:var(--body);color:var(--ink);font-size:var(--f-body);line-height:var(--lh);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:linear-gradient(160deg,#d3ecff,#aadaff 45%,#82c8f6);transition:background .5s var(--ease),color .3s}
[data-theme="dark"] .gz-body{background:linear-gradient(160deg,#06121f,#08243a)}
[data-bg="black"] .gz-body{background:#000!important}
.gz-body ::selection{background:var(--blue);color:#fff}

/* ===== LIVING WATER ===== */
#water{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#water.fallback{background:
  radial-gradient(40% 30% at 20% 25%,rgba(0,210,255,.6),transparent 60%),
  radial-gradient(45% 35% at 80% 20%,rgba(24,139,246,.5),transparent 60%),
  radial-gradient(50% 40% at 60% 85%,rgba(94,228,255,.55),transparent 60%),
  linear-gradient(160deg,#cdecff,#7fccff);background-size:200% 200%,220% 220%,200% 200%,100% 100%;animation:gz-flow 18s ease-in-out infinite alternate}
@keyframes gz-flow{0%{background-position:0 0,100% 0,50% 100%,0 0}100%{background-position:60% 40%,20% 60%,80% 10%,0 0}}
[data-theme="dark"] #water.fallback{background:radial-gradient(40% 30% at 20% 25%,rgba(0,210,255,.4),transparent 60%),radial-gradient(45% 35% at 80% 20%,rgba(24,139,246,.34),transparent 60%),linear-gradient(160deg,#08131f,#0a0f1a);background-size:200% 200%,220% 220%,100% 100%;animation:gz-flow 20s ease-in-out infinite alternate}
[data-bg="black"] #water{display:none!important}

/* ===== GLASS MATERIAL ===== */
.glass{position:relative;background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(150%) brightness(1.06);-webkit-backdrop-filter:blur(var(--blur)) saturate(150%) brightness(1.06);
  border:1px solid transparent;border-radius:var(--r-lg);
  box-shadow:var(--e2),var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top);
  text-shadow:var(--txt-scrim)}
/* MOVING GLINT — sharp specular streak sliding along top + right edges as --lx/--ly travel */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:1;
  background:
    radial-gradient(24% 2px at calc(50% + var(--lx)*50%) 1px,rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    radial-gradient(40% 8px at calc(50% + var(--lx)*50%) 1px,rgba(198,238,255,.5),rgba(198,238,255,0) 74%),
    radial-gradient(2px 24% at calc(100% - 1px) calc(50% - var(--ly)*50%),rgba(255,255,255,.98),rgba(255,255,255,0) 72%),
    radial-gradient(8px 38% at calc(100% - 1px) calc(50% - var(--ly)*50%),rgba(198,238,255,.5),rgba(198,238,255,0) 74%),
    linear-gradient(var(--l-angle),rgba(255,255,255,.10),rgba(255,255,255,0) 16%)}
[data-theme="dark"] .glass::before{opacity:1;
  background:
    radial-gradient(24% 2px at calc(50% + var(--lx)*50%) 1px,rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(42% 9px at calc(50% + var(--lx)*50%) 1px,rgba(150,225,255,.45),rgba(150,225,255,0) 74%),
    radial-gradient(2px 24% at calc(100% - 1px) calc(50% - var(--ly)*50%),rgba(255,255,255,.95),rgba(255,255,255,0) 72%),
    radial-gradient(9px 40% at calc(100% - 1px) calc(50% - var(--ly)*50%),rgba(150,225,255,.45),rgba(150,225,255,0) 74%),
    linear-gradient(var(--l-angle),rgba(255,255,255,.10),rgba(255,255,255,0) 13%)}
.glass>*{position:relative;z-index:1}
/* Black (OLED) preset: base tiles float on solid black by their lit edges (no drop shadow) */
[data-bg="black"] .glass{box-shadow:var(--edge),var(--curve),var(--rim),inset 0 9px 22px var(--inner-top)}

/* ===== LED STATUS LIGHTS ===== */
.led{position:relative;width:11px;height:11px;border-radius:50%;flex:0 0 auto;display:inline-block;background:radial-gradient(circle at 34% 30%,#fff,var(--c) 62%);box-shadow:0 0 5px var(--c),0 0 11px var(--c),inset 0 0 3px rgba(255,255,255,.9)}
.led::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 68%);z-index:-1}
.led.ok{--c:#10d99a}.led.warn{--c:#ffb020}.led.err{--c:#ff4d63}
.led.ok::after{animation:gz-breathe 3.4s ease-in-out infinite}.led.ok{animation:gz-coreB 3.4s ease-in-out infinite}
@keyframes gz-breathe{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:.65;transform:scale(1.35)}}
@keyframes gz-coreB{0%,100%{box-shadow:0 0 5px var(--c),0 0 10px var(--c),inset 0 0 3px rgba(255,255,255,.9)}50%{box-shadow:0 0 8px var(--c),0 0 18px var(--c),inset 0 0 3px #fff}}
.led.warn::after{animation:gz-sh2 2.6s ease-in-out infinite}.led.warn{animation:gz-flick 3.1s linear infinite}
@keyframes gz-sh2{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.18)}}
@keyframes gz-flick{0%{filter:brightness(1)}6%{filter:brightness(1.5)}9%{filter:brightness(.8)}13%{filter:brightness(1.4)}18%{filter:brightness(1)}45%{filter:brightness(1.3)}48%{filter:brightness(.9)}52%{filter:brightness(1.35)}70%{filter:brightness(1)}100%{filter:brightness(1.1)}}
.led.err::after{animation:gz-urge 1.15s var(--ease) infinite}.led.err{animation:gz-coreU 1.15s var(--ease) infinite}
@keyframes gz-urge{0%{opacity:.7;transform:scale(.7)}70%,100%{opacity:0;transform:scale(2.5)}}
@keyframes gz-coreU{0%,100%{box-shadow:0 0 5px var(--c),0 0 10px var(--c),inset 0 0 3px #fff}50%{box-shadow:0 0 9px var(--c),0 0 22px var(--c),inset 0 0 4px #fff}}
@media(prefers-reduced-motion:reduce){.led,.led::after{animation:none!important}}

/* ===== LIQUID-GLASS + ETCHED NUMERALS ===== */
@keyframes gz-liquidflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.liquid,.liquid-num{
  background:var(--liquid)!important;background-size:280% 280%!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;
  animation:gz-liquidflow 7.5s ease-in-out infinite;text-shadow:var(--liquid-sh);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.liquid,.liquid-num{animation:none}}
/* Etched (intaglio): blue-gradient fill carved into the glass via the #etch-inner SVG filter
   (deep dark shadow on the top-right inner lip). Gated behind body.etched (one-line revert). */
body.etched .liquid,body.etched .liquid-num{background-image:var(--liquid-etch)!important;text-shadow:var(--liquid-sh-etch);filter:url(#etch-inner)}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== PERSONALIZE SHEET + shared glass buttons ===== */
.iconbtn{width:40px;height:40px;border-radius:12px;background:var(--glass-2);border:1px solid var(--glass-border);box-shadow:var(--e1),var(--curve-sm),var(--rim-sm);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform var(--dur-fast) var(--spring);color:var(--ink)}
.iconbtn .icon{width:20px;height:20px}.iconbtn:active{transform:scale(.9)}
[data-bg="black"] .iconbtn{box-shadow:var(--edge),var(--curve-sm),var(--rim-sm)}
.icon{width:22px;height:22px;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon .acc{stroke:var(--aqua)}.icon .accf{fill:var(--aqua);stroke:none}

.pz{position:fixed;inset:0;z-index:60;display:none;align-items:flex-end;justify-content:center;padding:0 12px calc(28px + env(safe-area-inset-bottom));background:rgba(8,26,48,.22);backdrop-filter:blur(3px)}
.pz.show{display:flex;animation:gz-fade .2s var(--ease)}
@keyframes gz-fade{from{opacity:0}to{opacity:1}}
.pz-card{width:min(440px,100%);padding:var(--s4);animation:gz-rise .4s var(--spring);border-radius:var(--r-lg)}
@keyframes gz-rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.pz-h{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3);display:flex;align-items:center;gap:6px}
.pset{margin:0 0 var(--s4)}.pset:last-child{margin-bottom:2px}
.pset label{display:flex;justify-content:space-between;align-items:center;font-size:var(--f-sm);font-weight:650;color:var(--ink-2);margin:0 0 9px}
.pset .pv{font-family:var(--mono);font-size:var(--f-xs);color:var(--blue-ink)}
[data-theme="dark"] .pset .pv{color:var(--aqua-2)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--pill);background:var(--glass-2);border:1px solid var(--glass-border);box-shadow:var(--rim-sm);outline:none;cursor:pointer}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad);box-shadow:var(--e1),var(--glow),inset 0 1.2px 0 rgba(255,255,255,.7);border:2px solid #fff;cursor:pointer}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#2f9bf6;border:2px solid #fff;cursor:pointer}
.rng.hue{background:linear-gradient(90deg,#ff5b5b,#ffb35c 14%,#12d0b0 30%,#00d2ff 48%,#3a7bff 62%,#a06bff 76%,#ff7ad1 90%,#ff5b5b)}
.swatches{display:flex;gap:9px;margin-top:11px}
.swatches button{width:28px;height:28px;border-radius:50%;background:var(--sw);border:2px solid #fff;box-shadow:var(--e1),inset 0 1.2px 0 rgba(255,255,255,.55);cursor:pointer;transition:transform var(--dur-fast) var(--spring)}
.swatches button:active{transform:scale(.86)}
.pset.ptoggle{display:flex;justify-content:space-between;align-items:center}
.switch{position:relative;width:50px;height:28px;flex:0 0 auto;border-radius:var(--pill);background:var(--glass-2);border:1px solid var(--glass-border);box-shadow:var(--rim-sm),inset 0 1px 3px rgba(12,44,80,.12);cursor:pointer;transition:background var(--dur) var(--ease),box-shadow var(--dur)}
.switch .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--e1),inset 0 1.2px 0 rgba(255,255,255,.7);transition:transform var(--dur) var(--spring)}
.switch[aria-checked="true"]{background:var(--grad);box-shadow:var(--glow),inset 0 1px 3px rgba(0,40,90,.2)}
.switch[aria-checked="true"] .knob{transform:translateX(22px)}
.switch:active .knob{transform:scale(.92)}
.switch[aria-checked="true"]:active .knob{transform:translateX(22px) scale(.92)}
.switch.blk[aria-checked="true"]{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),inset 0 1px 3px rgba(0,0,0,.6)}
.pz .black-hint{display:none;font-size:var(--f-sm);color:var(--muted);line-height:1.45;margin:2px 0 2px}
.pz.black-locked .pset:not(.pset-black){display:none}
.pz.black-locked .black-hint{display:block}

/* ===== TACTILE "DELIGHT TO TOUCH" LAYER ===== */
.is-pressing{scale:.975}
.is-releasing{animation:gz-press-spring var(--dur) var(--spring)}
@keyframes gz-press-spring{0%{scale:.975}55%{scale:1.012}100%{scale:1}}
.touch-bloom{position:fixed;z-index:80;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.5),rgba(150,225,255,.34) 34%,rgba(150,225,255,0) 70%);
  mix-blend-mode:screen;opacity:0;transform:scale(.3);will-change:transform,opacity}
.touch-bloom.go{animation:gz-touch-bloom .5s var(--ease) forwards}
@keyframes gz-touch-bloom{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1)}}
.toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:var(--pill);font-size:var(--f-sm);font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.35);z-index:70;opacity:0;transition:all var(--dur) var(--spring);pointer-events:none;font-family:var(--mono)}
[data-theme="dark"] .toast{background:#eaf3ff;color:#08243f}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.is-pressing,.is-releasing{scale:1;animation:none}.touch-bloom{display:none}}