/* ==========================================================
   Liquid Glass icons — one place to tune the whole look.
   Markup (built by GlassIcon.create in glass-icons.js):
   <span class="gi gi--md" style="--gi-tint:#B5573A">
     <span class="gi__glow"></span><span class="gi__glass"></span><span class="gi__icon">…svg…</span>
   </span>
   Modifiers: gi--sm (40) gi--md (56) gi--lg (72) gi--xs (28, for tight UI like tabs)
              gi--circle, gi--lite (no backdrop blur: lists/grids), gi--liquid (SVG refraction, Chromium)
   ========================================================== */
:root{
  --gi-blur:18px;           /* backdrop blur */
  --gi-sat:180%;            /* backdrop saturation */
  --gi-radius:28%;          /* rounded-square radius */
  --gi-fill:rgba(255,255,255,.42);
  --gi-fill-solid:rgba(251,247,239,.92);   /* fallback when blur is unsupported / reduced transparency */
  --gi-border:rgba(255,255,255,.6);
  --gi-edge-hi:rgba(255,255,255,.95);      /* gradient border, top-left */
  --gi-hl:rgba(255,255,255,.8);            /* specular highlight */
  --gi-ink:#2B2521;                        /* icon colour */
  --gi-shadow:0 8px 24px rgba(70,45,20,.18);
  --gi-tint-amt:30%;        /* how much tint colours the glass */
  --gi-glow-amt:45%;        /* tint glow behind the glass */
  --gi-ring:#B5573A;        /* focus ring */
}
/* dark theme + any dark section (add class gi-dark to the section) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --gi-fill:rgba(255,255,255,.1);--gi-fill-solid:rgba(40,34,29,.94);--gi-border:rgba(255,255,255,.25);--gi-edge-hi:rgba(255,255,255,.7);
  --gi-hl:rgba(255,255,255,.38);--gi-ink:#FFFFFF;--gi-shadow:0 8px 24px rgba(0,0,0,.35);--gi-ring:#E08A67;}}
:root[data-theme="dark"],.gi-dark{
  --gi-fill:rgba(255,255,255,.1);--gi-fill-solid:rgba(40,34,29,.94);--gi-border:rgba(255,255,255,.25);--gi-edge-hi:rgba(255,255,255,.7);
  --gi-hl:rgba(255,255,255,.38);--gi-ink:#FFFFFF;--gi-shadow:0 8px 24px rgba(0,0,0,.35);--gi-ring:#E08A67;}

.gi{--gi-s:56px;--mx:50%;--my:22%;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--gi-s);height:var(--gi-s);
  border-radius:var(--gi-radius);isolation:isolate;color:var(--gi-ink);vertical-align:middle;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
.gi--xs{--gi-s:28px}.gi--sm{--gi-s:40px}.gi--md{--gi-s:56px}.gi--lg{--gi-s:72px}
.gi--circle{border-radius:50%}
.gi__glow{position:absolute;inset:-22%;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--gi-tint,transparent) var(--gi-glow-amt),transparent) 0,transparent 68%);
  filter:blur(8px);opacity:.85;transition:opacity .25s}
.gi__glass{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--gi-tint,#fff) var(--gi-tint-amt),transparent),color-mix(in srgb,var(--gi-tint,#fff) 10%,transparent)),var(--gi-fill);
  -webkit-backdrop-filter:blur(var(--gi-blur)) saturate(var(--gi-sat));backdrop-filter:blur(var(--gi-blur)) saturate(var(--gi-sat));
  border:1px solid var(--gi-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -1px 2px rgba(0,0,0,.25),var(--gi-shadow)}
/* specular highlight on the upper part, follows the cursor via --mx/--my */
.gi__glass::before{content:"";position:absolute;left:0;right:0;top:0;height:55%;border-radius:inherit;
  background:radial-gradient(120% 100% at var(--mx) var(--my),var(--gi-hl),transparent 62%);opacity:.9;transition:opacity .25s}
/* gradient border: bright top-left, fading bottom-right */
.gi__glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,var(--gi-edge-hi),rgba(255,255,255,.12) 45%,rgba(255,255,255,0) 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.gi__icon{position:relative;display:grid;place-items:center;width:48%;height:48%;
  font-family:var(--display,system-ui);font-weight:800;font-size:calc(var(--gi-s)*.3);line-height:1;letter-spacing:-.02em;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.gi__icon svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.gi__icon svg.fill{fill:currentColor;stroke:none}
.gi__icon img{width:100%;height:100%;object-fit:contain}
.gi--lite .gi__glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,color-mix(in srgb,var(--gi-tint,#fff) 38%,transparent),color-mix(in srgb,var(--gi-tint,#fff) 14%,transparent)),var(--gi-fill-solid)}
html.gi-refract .gi--liquid .gi__glass{-webkit-backdrop-filter:url(#gi-liquid) blur(var(--gi-blur)) saturate(var(--gi-sat));backdrop-filter:url(#gi-liquid) blur(var(--gi-blur)) saturate(var(--gi-sat))}

/* interaction: the icon itself, or the button/link that holds it */
:is(button,a,[role="button"],.gi--interactive):hover .gi,.gi.gi--interactive:hover{transform:scale(1.06)}
:is(button,a,[role="button"],.gi--interactive):hover .gi__glow,.gi.gi--interactive:hover .gi__glow{opacity:1}
:is(button,a,[role="button"],.gi--interactive):hover .gi__glass::before{opacity:1}
:is(button,a,[role="button"],.gi--interactive):active .gi,.gi.gi--interactive:active{transform:scale(.96);transition-duration:.08s}
.gi.gi--interactive:focus-visible,:is(button,a):focus-visible .gi{outline:2px solid var(--gi-ring);outline-offset:3px}

/* fallbacks */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.gi__glass{background:linear-gradient(160deg,color-mix(in srgb,var(--gi-tint,#fff) 38%,transparent),transparent),var(--gi-fill-solid)}}
@media (prefers-reduced-transparency:reduce){.gi__glass{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:linear-gradient(160deg,color-mix(in srgb,var(--gi-tint,#fff) 38%,transparent),transparent),var(--gi-fill-solid)}.gi__glow{opacity:.4}}
@media (prefers-reduced-motion:reduce){.gi,:is(button,a,[role="button"],.gi--interactive):hover .gi,:is(button,a,[role="button"],.gi--interactive):active .gi{transform:none!important;transition:none!important}}