/* liquid-glass-card: refraction, specular rim, tilt. Zyqor Components, MIT. */
.lg{--lg-tint:255 255 255;--lg-r:22px;position:relative;isolation:isolate;border-radius:var(--lg-r);color:var(--ink,#23453E);
  background:rgb(var(--lg-tint) / .16);
  -webkit-backdrop-filter:blur(16px) saturate(1.5) brightness(1.04);backdrop-filter:blur(16px) saturate(1.5) brightness(1.04);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55),inset 0 -1px 0 rgb(255 255 255 / .14),inset 0 0 0 1px rgb(255 255 255 / .22);
  transform:translate3d(var(--lg-dx,0),var(--lg-dy,0),0) perspective(900px) rotateX(var(--lg-rx,0deg)) rotateY(var(--lg-ry,0deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
.lg.is-drag{transition:none;cursor:grabbing}
.lg[data-lg-drag]{cursor:grab;touch-action:none}
html.lg-refract .lg{-webkit-backdrop-filter:url(#lg-refract) blur(6px) saturate(1.6) brightness(1.05);backdrop-filter:url(#lg-refract) blur(6px) saturate(1.6) brightness(1.05)}
/* specular: a small soft light that follows the pointer, plus a fixed rim light top-left */
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(240px circle at var(--lg-mx,30%) var(--lg-my,0%),rgb(255 255 255 / .34),rgb(255 255 255 / 0) 60%);opacity:.9;transition:opacity .4s}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg,rgb(255 255 255 / .8),rgb(255 255 255 / 0) 38%,rgb(255 255 255 / 0) 70%,rgb(255 255 255 / .35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg{background:rgb(var(--lg-tint) / .82)}}
@media (prefers-reduced-transparency:reduce){.lg{background:rgb(var(--lg-tint) / .9);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.lg{transition:none;transform:translate3d(var(--lg-dx,0),var(--lg-dy,0),0)}}
/* demo page only */
.lg-scene{position:relative;overflow:hidden;border-radius:14px;min-height:clamp(560px,70vh,760px);background:var(--bg);display:grid;place-items:center;padding:clamp(20px,4vw,48px)}
.lg-back{position:absolute;inset:0;pointer-events:none}
.lg-word{position:absolute;left:-2%;right:-2%;font:800 clamp(110px,22vw,330px)/.8 var(--display);letter-spacing:-.06em;font-stretch:76%;color:var(--ink);white-space:nowrap;text-align:center}
.lg-word.w1{top:4%}.lg-word.w2{bottom:2%;color:transparent;-webkit-text-stroke:2px var(--ink)}
.lg-sun{position:absolute;width:clamp(160px,24vw,320px);aspect-ratio:1;border-radius:50%;background:var(--acc);right:12%;top:20%}
.lg-arch{position:absolute;width:clamp(140px,18vw,240px);height:clamp(220px,30vw,380px);border-radius:999px 999px 0 0;background:#3F7A6B;left:10%;bottom:0}
.lg-stripes{position:absolute;left:0;right:0;top:46%;height:44px;background:repeating-linear-gradient(90deg,var(--ink) 0 22px,transparent 22px 44px);opacity:.9}
.lg-card{position:relative;z-index:2;width:min(420px,100%);padding:clamp(22px,3vw,30px)}
.lg-card .mono{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.lg-card h3{font:700 clamp(30px,4vw,44px)/1 var(--display);letter-spacing:-.03em;margin:.3em 0 .25em}
.lg-card p{margin:0 0 18px;color:color-mix(in srgb,var(--ink) 80%,transparent)}
.lg-meta{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgb(255 255 255 / .4);padding-top:14px;font:600 14px/1.2 var(--body)}
.lg-meta b{display:block;font:700 22px/1.1 var(--display)}
.lg-pill{position:absolute;z-index:2;left:clamp(16px,4vw,40px);top:clamp(16px,4vw,40px);display:flex;gap:4px;padding:5px;--lg-r:999px}
.lg-pill a{padding:10px 14px;border-radius:999px;text-decoration:none;font:600 14px/1 var(--body);min-height:40px;display:inline-flex;align-items:center}
.lg-pill a[aria-current]{background:rgb(255 255 255 / .55)}
.lg-hint{position:absolute;z-index:2;right:16px;bottom:14px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:rgb(255 255 255 / .5);padding:7px 10px;border-radius:999px}
@media (max-width:600px){.lg-pill a:nth-child(3){display:none}}