/* DyorHQ landing — holographic glass layer (owned by the holo designer).
   The LOOK of the frosted cards, the iridescent 3D shapes inside them, the chrome-ribbon pills,
   the dark glass pill bar, the tiny 3D glyphs and the grey bento tile's shapes. Pure CSS: layered
   radial/conic/linear gradients, small blurs, screen blends, and a few pseudo-element faces turned
   in 3D. No images, no libraries, no animation (motion.css owns movement).
   Placement + sizes of .holo / .holo-pill / .glass-bar live in site.css; this file never positions
   those roots, only what lives inside them. Shape geometry is in % of the card, shading in em, and
   the card's em scales with its width (container units), so every context shares one look. */

/* ---------- derived shades: mixed from theme-INVARIANT glass anchors so the shapes
   shade identically in light and dark (the glass face is white in both) ---------- */
:root{
  --glass-white:#FFFFFF;   /* the shapes always live on a white glass face */
  --glass-ink:#0F0F14;     /* ...so their shadow ends stay dark in both themes */
  --hs-pink-l:color-mix(in oklab,var(--holo-pink) 42%,var(--glass-white));
  --hs-pink-d:color-mix(in oklab,var(--holo-pink) 68%,var(--glass-ink));
  --hs-blue-l:color-mix(in oklab,var(--holo-blue) 40%,var(--glass-white));
  --hs-blue-d:color-mix(in oklab,var(--holo-deep) 66%,var(--glass-ink));
  --hs-purple-d:color-mix(in oklab,var(--holo-purple) 62%,var(--glass-ink));
  --hs-orange-d:color-mix(in oklab,var(--holo-orange) 72%,var(--glass-ink));
  --hs-peach:color-mix(in oklab,var(--holo-orange) 46%,var(--glass-white));
  --hs-chrome-1:color-mix(in oklab,var(--holo-ice) 62%,var(--glass-white));  /* lit chrome */
  --hs-chrome-2:color-mix(in oklab,var(--holo-ice) 50%,var(--holo-purple));  /* chrome mid-tone */
  --hs-chrome-3:color-mix(in oklab,var(--holo-purple) 30%,var(--glass-ink)); /* chrome shadow side */
  /* 3x3 bevel grid painted on every cube face: bright left/top edge per cell, faint right/bottom */
  --hs-grid:repeating-linear-gradient(90deg,rgb(255 255 255 / .8) 0,rgb(255 255 255 / 0) 8%,rgb(255 255 255 / 0) 26%,rgb(255 255 255 / .3) 33.34%),repeating-linear-gradient(0deg,rgb(255 255 255 / .65) 0,rgb(255 255 255 / 0) 8%,rgb(255 255 255 / 0) 26%,rgb(15 15 20 / .1) 33.34%);
  /* frosted-glass grain: a 180px tile of white fractal noise at ~7% alpha (inline SVG, rasterised once) */
  --hs-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- .holo: frosted translucent white glass card ---------- */
.holo{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;border-radius:var(--r-card);color:var(--ink);font-family:var(--sans);font-size:.72rem;line-height:1.15;text-align:left;
  background:var(--glass-face,linear-gradient(128deg,rgb(255 255 255 / .8) 0%,rgb(255 255 255 / .56) 46%,rgb(255 255 255 / .48) 100%));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  box-shadow:var(--shadow-card),0 0 0 1px rgb(15 15 20 / .035)}
/* the glass sheet itself sits OVER the shapes: grain, a top-left highlight, a thin bright edge, an inner shadow toward bottom-right */
.holo::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:var(--hs-grain) 0 0/180px 180px,linear-gradient(118deg,rgb(255 255 255 / .6) 0%,rgb(255 255 255 / .2) 30%,rgb(255 255 255 / 0) 52%,rgb(255 255 255 / .06) 76%,rgb(255 255 255 / .18) 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .6),inset 0 1.5px 0 var(--glass-hi),inset 1px 0 0 rgb(255 255 255 / .45),inset .6em .6em 1.6em rgb(255 255 255 / .32),inset -.7em -.9em 1.8em rgb(15 15 20 / .08)}
.holo__shapes,.holo__meta,.holo__row{font-size:clamp(.56rem,5cqw,.92rem)}
.holo__shapes{position:absolute;inset:0;z-index:1;display:block;overflow:hidden;border-radius:inherit;pointer-events:none}
/* colour bleeding into the frost around the objects */
.holo__shapes::before{content:"";position:absolute;inset:-12%;filter:blur(12px);
  background:radial-gradient(ellipse 36% 46% at 24% 32%,color-mix(in srgb,var(--holo-pink) 34%,transparent),transparent 70%),radial-gradient(ellipse 36% 46% at 80% 72%,color-mix(in srgb,var(--holo-blue) 26%,transparent),transparent 70%)}

/* deep card: saturated blue glass, far less frost, light ink */
.holo--deep{color:var(--on-dark);background:linear-gradient(135deg,var(--holo-blue) 0%,var(--holo-deep) 44%,var(--hs-blue-d) 100%);box-shadow:var(--shadow-card),0 0 0 1px rgb(15 15 20 / .1)}
.holo--deep::after{background:var(--hs-grain) 0 0/180px 180px,linear-gradient(118deg,rgb(255 255 255 / .36) 0%,rgb(255 255 255 / .1) 30%,rgb(255 255 255 / 0) 52%,rgb(15 15 20 / .12) 100%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .26),inset 0 1.5px 0 rgb(255 255 255 / .6),inset -.7em -.9em 1.8em rgb(15 15 20 / .3)}
.holo--deep .holo__shapes::before{background:radial-gradient(ellipse 40% 50% at 20% 30%,color-mix(in srgb,var(--holo-cyan) 40%,transparent),transparent 70%),radial-gradient(ellipse 40% 50% at 84% 78%,color-mix(in srgb,var(--holo-orange) 30%,transparent),transparent 70%)}
/* floating card in the dark room: near-opaque so it stays white over the wall and the phone */

/* ---------- card type: wire numeral, name + caps line, mono value ---------- */
.holo__num{position:absolute;right:7%;top:7%;z-index:3;font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,13.5cqw,2.5rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;user-select:none;
  color:color-mix(in srgb,var(--holo-pink) 10%,transparent);-webkit-text-stroke-width:max(1px,.03em);-webkit-text-stroke-color:color-mix(in srgb,var(--holo-pink) 72%,var(--holo-orange));opacity:.62;transform:rotate(-7deg);transform-origin:100% 0}
.holo--deep .holo__num{color:rgb(255 255 255 / .1);-webkit-text-stroke-color:rgb(255 255 255 / .85);opacity:.72}
.holo__meta{position:absolute;left:8%;bottom:9%;z-index:3;max-width:54%;display:flex;flex-direction:column;gap:.18em}
.holo__meta b{font-weight:700;font-size:1.06em;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.holo__meta span{font-family:var(--mono);font-size:max(.6em,8px);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.holo__row{position:absolute;right:8%;bottom:9%;z-index:3;max-width:44%;display:flex;flex-direction:column;align-items:flex-end;gap:.18em;text-align:right}
.holo__row .mono{font-size:.94em;font-weight:600;letter-spacing:-.01em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.holo__row span:last-child{font-family:var(--mono);font-size:max(.58em,8px);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.holo--deep .holo__meta span,.holo--deep .holo__row span:last-child{color:var(--on-dark-2)}

/* ---------- .hs: the iridescent objects (positions in % of the card, shading in em) ---------- */
.hs{position:absolute;display:block;pointer-events:none}
.hs::before,.hs::after{content:"";position:absolute}

/* glass cubes: a 3x3 bevelled block; front = the element, right = ::before, top = ::after, turned together in 3D
   (orthographic, so the faces meet exactly). Faces are alpha glass so the stack reads translucent. */
.hs--cubes{left:9%;top:24%;width:28%;aspect-ratio:1;transform-style:preserve-3d;transform:rotateX(-28deg) rotateY(-38deg);
  background:var(--hs-grid),linear-gradient(160deg,var(--hs-pink-l),color-mix(in srgb,var(--holo-pink) 82%,transparent) 60%,color-mix(in srgb,var(--hs-pink-d) 88%,transparent))}
.hs--cubes::before{inset:0 auto 0 100%;width:100%;transform-origin:0 50%;transform:rotateY(90deg);
  background:var(--hs-grid),linear-gradient(100deg,color-mix(in srgb,var(--holo-pink) 86%,transparent),color-mix(in srgb,var(--hs-pink-d) 92%,transparent) 65%,var(--hs-purple-d))}
.hs--cubes::after{inset:auto 0 100% 0;height:100%;transform-origin:50% 100%;transform:rotateX(90deg);
  background:var(--hs-grid),linear-gradient(0deg,rgb(255 255 255 / .96),var(--hs-pink-l) 60%,color-mix(in srgb,var(--holo-pink) 80%,transparent))}
/* blue/orange mosaic cubes, turned the other way so the LEFT face shows */
.hs--cubes-b{left:6%;top:auto;bottom:8%;width:24%;transform:rotateX(-26deg) rotateY(34deg);
  background:var(--hs-grid),linear-gradient(var(--holo-orange),var(--holo-orange)) 100% 0/33.4% 33.4% no-repeat,linear-gradient(var(--holo-ice),var(--holo-ice)) 0 100%/33.4% 33.4% no-repeat,linear-gradient(160deg,var(--hs-blue-l),color-mix(in srgb,var(--holo-blue) 86%,transparent) 55%,color-mix(in srgb,var(--holo-deep) 90%,transparent))}
.hs--cubes-b::before{inset:0 100% 0 auto;width:100%;transform-origin:100% 50%;transform:rotateY(-90deg);
  background:var(--hs-grid),linear-gradient(var(--hs-orange-d),var(--hs-orange-d)) 100% 50%/33.4% 33.4% no-repeat,linear-gradient(260deg,color-mix(in srgb,var(--holo-deep) 90%,transparent),var(--hs-blue-d))}
.hs--cubes-b::after{background:var(--hs-grid),linear-gradient(var(--holo-orange),var(--holo-orange)) 50% 100%/33.4% 33.4% no-repeat,linear-gradient(0deg,rgb(255 255 255 / .95),var(--hs-blue-l) 55%,color-mix(in srgb,var(--holo-blue) 80%,transparent))}

/* chrome spheres: key light top-left, a colour band reflected in the lower half, dark terminator,
   a rim light on the shadow side (::before, a masked conic arc) and a hot specular (::after) */
.hs--orb{right:-5%;top:-15%;width:40%;aspect-ratio:1;border-radius:50%;
  --hs-c1:var(--hs-chrome-1);--hs-c2:var(--hs-chrome-2);--hs-c3:var(--hs-chrome-3);--hs-b1:var(--holo-pink);--hs-b2:var(--holo-blue);
  background:radial-gradient(circle at 33% 28%,rgb(255 255 255 / .98) 0,rgb(255 255 255 / .55) 6%,rgb(255 255 255 / 0) 20%),linear-gradient(174deg,rgb(255 255 255 / 0) 44%,rgb(255 255 255 / .5) 48%,rgb(15 15 20 / .3) 50.5%,rgb(15 15 20 / 0) 60%),radial-gradient(ellipse 120% 46% at 50% 114%,var(--hs-b2) 30%,var(--hs-b1) 46%,rgb(255 255 255 / 0) 60%),radial-gradient(closest-side,rgb(255 255 255 / 0) 64%,rgb(255 255 255 / .3) 82%,rgb(255 255 255 / 0) 96%),radial-gradient(circle at 36% 30%,var(--glass-white) 0,var(--hs-c1) 18%,var(--hs-c2) 50%,var(--hs-c3) 80%,var(--hs-c2) 98%);
  box-shadow:inset -.4em -.6em 1.2em rgb(15 15 20 / .5),inset .25em .3em .6em rgb(255 255 255 / .6),0 .6em 1.4em -.4em rgb(15 15 20 / .35)}
.hs--orb::before{inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgb(255 255 255 / 0) 0 24%,rgb(255 255 255 / .95) 38%,rgb(255 255 255 / 0) 52%);
  -webkit-mask:radial-gradient(closest-side,transparent 84%,#000 90%,#000 95%,transparent 100%);mask:radial-gradient(closest-side,transparent 84%,#000 90%,#000 95%,transparent 100%)}
.hs--orb::after{left:24%;top:15%;width:24%;height:14%;border-radius:50%;background:var(--glass-white);filter:blur(.5px);transform:rotate(-28deg)}
.hs--orb-b{--hs-c1:var(--hs-blue-l);--hs-c2:var(--holo-blue);--hs-c3:var(--hs-blue-d);--hs-b1:var(--holo-purple);--hs-b2:var(--holo-pink)}
.hs--orb-c{--hs-c1:var(--hs-peach);--hs-c2:var(--holo-pink);--hs-c3:var(--hs-purple-d);--hs-b1:var(--holo-orange);--hs-b2:var(--holo-purple)}

/* glossy torus: an ellipse with the hole masked out (hole sits high, so the near side of the tube is thicker);
   inner wall in shadow, a gloss on the crest, a rim streak (::before) and rainbow dispersion at the lip (::after) */
.hs--ring{left:-20%;top:-10%;width:82%;aspect-ratio:1.18;border-radius:50%;transform:rotate(-24deg);
  background:radial-gradient(closest-side at 50% 46%,rgb(255 255 255 / 0) 60%,rgb(15 15 20 / .5) 63%,rgb(15 15 20 / 0) 75%),radial-gradient(closest-side,rgb(255 255 255 / 0) 76%,rgb(255 255 255 / .5) 85%,rgb(255 255 255 / 0) 92%),radial-gradient(ellipse 60% 50% at 34% 22%,rgb(255 255 255 / .55),rgb(255 255 255 / 0) 60%),radial-gradient(ellipse 70% 60% at 72% 84%,rgb(15 15 20 / .38),rgb(15 15 20 / 0) 62%),conic-gradient(from 210deg,var(--holo-orange),var(--holo-pink) 16%,var(--holo-purple) 38%,var(--holo-deep) 56%,var(--holo-blue) 68%,var(--holo-cyan) 80%,var(--holo-pink) 92%,var(--holo-orange));
  -webkit-mask:radial-gradient(closest-side at 50% 46%,transparent 58%,#000 60%);mask:radial-gradient(closest-side at 50% 46%,transparent 58%,#000 60%)}
.hs--ring::before{inset:0;border-radius:50%;background:conic-gradient(from 285deg,rgb(255 255 255 / 0) 0 3%,rgb(255 255 255 / .95) 9%,rgb(255 255 255 / 0) 17%);
  -webkit-mask:radial-gradient(closest-side,transparent 86%,#000 90%,#000 97%,transparent 100%);mask:radial-gradient(closest-side,transparent 86%,#000 90%,#000 97%,transparent 100%)}
.hs--ring::after{inset:0;border-radius:50%;mix-blend-mode:screen;background:conic-gradient(from 40deg,var(--holo-cyan),var(--holo-pink) 30%,var(--holo-orange) 50%,var(--holo-cyan) 70%,var(--holo-purple));
  -webkit-mask:radial-gradient(closest-side at 50% 46%,transparent 59%,#000 61%,#000 64%,transparent 69%);mask:radial-gradient(closest-side at 50% 46%,transparent 59%,#000 61%,#000 64%,transparent 69%)}

/* fine dot grid and diagonal hatching (wedges, like the printed guilloche corners in the reference) */
.hs--dots{right:5%;top:8%;width:38%;height:44%;background:radial-gradient(circle,rgb(15 15 20 / .42) 0 .6px,transparent 1.3px) 0 0/.5em .5em;
  -webkit-mask:linear-gradient(205deg,#000 20%,transparent 95%);mask:linear-gradient(205deg,#000 20%,transparent 95%)}
.hs--lines{left:-4%;bottom:-8%;width:56%;height:52%;clip-path:polygon(0 0,100% 100%,0 100%);opacity:.7;background:repeating-linear-gradient(-50deg,var(--holo-pink) 0 1px,rgb(255 255 255 / 0) 1px .36em)}
.hs--lines-b{left:-6%;bottom:-8%;width:54%;height:60%;clip-path:polygon(0 100%,100% 0,100% 100%);opacity:.5;mix-blend-mode:screen;background:repeating-linear-gradient(35deg,rgb(255 255 255 / .95) 0 1px,rgb(255 255 255 / 0) 1px .4em)}

/* banded glass rod: hard colour bands under a cylindrical shade, a second rod behind it, a specular line along the top */
.hs--stripe{left:-26%;top:34%;width:152%;height:30%;border-radius:.45em;transform:rotate(-22deg);
  background:linear-gradient(180deg,rgb(255 255 255 / .55),rgb(255 255 255 / .1) 28%,rgb(255 255 255 / 0) 55%,rgb(15 15 20 / .2) 100%),linear-gradient(90deg,var(--holo-orange) 0 20%,var(--hs-orange-d) 20% 21.5%,var(--holo-blue) 21.5% 38%,var(--holo-deep) 38% 40%,var(--holo-purple) 40% 52%,var(--holo-pink) 52% 62%,var(--holo-ice) 62% 72%,var(--holo-orange) 72% 86%,var(--holo-deep) 86%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 .6em 1.4em -.3em rgb(15 15 20 / .3)}
.hs--stripe::before{inset:auto -4% -48% 8%;height:62%;z-index:-1;border-radius:inherit;opacity:.92;
  background:linear-gradient(180deg,rgb(255 255 255 / .4),rgb(255 255 255 / 0) 45%,rgb(15 15 20 / .25)),linear-gradient(90deg,var(--holo-deep) 0 18%,var(--holo-ice) 18% 30%,var(--holo-orange) 30% 48%,var(--holo-blue) 48% 66%,var(--holo-pink) 66% 80%,var(--holo-deep) 80%)}
.hs--stripe::after{left:2%;right:2%;top:9%;height:2px;border-radius:2px;background:linear-gradient(90deg,rgb(255 255 255 / 0),rgb(255 255 255 / .9) 30%,rgb(255 255 255 / .9) 60%,rgb(255 255 255 / 0))}

/* blue glass slabs: three plates stepping up and to the right; the hard offset shadow is each plate's thickness */
.hs--blocks{left:-10%;top:30%;width:58%;height:30%;border-radius:.3em;transform:skewX(-26deg) rotate(-6deg);
  background:linear-gradient(180deg,rgb(255 255 255 / .45),rgb(255 255 255 / 0) 40%),linear-gradient(100deg,color-mix(in srgb,var(--holo-cyan) 85%,transparent),color-mix(in srgb,var(--holo-blue) 88%,transparent) 45%,color-mix(in srgb,var(--holo-deep) 92%,transparent));
  box-shadow:0 .55em 0 var(--hs-blue-d),inset 0 1px 0 rgb(255 255 255 / .8)}
.hs--blocks::before{inset:-62% -8% auto 16%;height:100%;border-radius:inherit;background:inherit;box-shadow:inherit;filter:brightness(1.08)}
.hs--blocks::after{inset:-124% -22% auto 36%;height:100%;border-radius:inherit;background:inherit;box-shadow:inherit;filter:brightness(1.18)}

/* holographic panel: a deep-blue pane with an orange band, a small orange pane (::before), a light seam (::after) */
.hs--panel{right:-10%;top:-12%;width:66%;height:82%;border-radius:.55em;transform:rotate(8deg);
  background:linear-gradient(165deg,rgb(255 255 255 / .42),rgb(255 255 255 / .06) 38%,rgb(255 255 255 / 0) 60%,rgb(15 15 20 / .18) 100%),linear-gradient(90deg,var(--holo-deep) 0 56%,var(--holo-orange) 56% 74%,var(--hs-orange-d) 74% 76.5%,var(--holo-blue) 76.5%);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .3),inset 0 1px 0 rgb(255 255 255 / .6),0 .8em 2em -.6em rgb(15 15 20 / .45)}
.hs--panel::before{left:-24%;bottom:-14%;width:46%;height:42%;border-radius:.4em;background:linear-gradient(160deg,var(--hs-peach),var(--holo-orange) 55%,var(--hs-orange-d));box-shadow:inset 0 1px 0 rgb(255 255 255 / .6),0 .5em 1.2em -.4em rgb(15 15 20 / .4)}
.hs--panel::after{left:14%;top:8%;width:2px;height:60%;background:linear-gradient(180deg,rgb(255 255 255 / .9),rgb(255 255 255 / 0))}

/* ---------- per-card arrangements so the five hero cards (and the others) don't repeat ---------- */
.holo--2 .hs--orb-b{width:30%;right:8%;top:auto;bottom:-16%}
.holo--3 .hs--stripe{top:30%;transform:rotate(-26deg)}
.holo--4 .hs--orb-c{width:36%;right:-4%;top:-12%}
.holo--5 .hs--panel{width:80%;height:98%;right:-16%;top:-8%;transform:rotate(10deg)}
.holo--5 .hs--panel::before{left:-36%;top:8%;bottom:auto}
.holo--c1 .hs--stripe{left:-8%;top:22%;width:118%;height:36%;transform:rotate(-62deg)}
.holo--c1 .hs--cubes{left:auto;right:6%;top:12%;width:26%}
.holo--c2 .hs--orb{width:38%;right:12%;top:12%}
.holo--c2 .hs--lines{left:auto;right:-6%;bottom:-6%;width:46%;height:58%;clip-path:polygon(100% 0,100% 100%,0 100%)}

/* ---------- .holo-pill: a chrome ribbon inside a frosted pill ---------- */
.holo-pill{position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:var(--r-pill);
  background:linear-gradient(100deg,var(--holo-deep) 0%,var(--holo-blue) 20%,var(--holo-purple) 38%,var(--holo-pink) 50%,var(--holo-purple) 64%,var(--holo-deep) 84%,var(--holo-purple) 100%);
  box-shadow:var(--shadow-card),0 0 0 1px rgb(15 15 20 / .05)}
/* the ribbon: two curved tubes (ring bands) and diagonal folds with a peach specular, softened a touch */
.holo-pill::before{content:"";position:absolute;inset:-8%;filter:blur(1.2px) saturate(1.2);
  background:radial-gradient(ellipse 40% 150% at 20% 30%,rgb(255 255 255 / 0) 44%,rgb(255 255 255 / .8) 48%,var(--holo-pink) 53%,var(--holo-purple) 60%,var(--holo-deep) 70%,rgb(255 255 255 / 0) 78%),radial-gradient(ellipse 34% 140% at 76% 82%,rgb(255 255 255 / 0) 40%,var(--hs-blue-l) 45%,var(--holo-blue) 52%,var(--hs-purple-d) 62%,rgb(255 255 255 / 0) 70%),linear-gradient(-28deg,rgb(255 255 255 / 0) 30%,rgb(15 15 20 / .35) 36%,rgb(255 255 255 / 0) 41%,var(--hs-peach) 46%,rgb(255 255 255 / .9) 48.5%,var(--hs-peach) 51%,rgb(255 255 255 / 0) 56%,rgb(15 15 20 / .3) 64%,rgb(255 255 255 / 0) 70%)}
/* the glass over it: one sharp specular line, a bloom, frosted ends, curvature shading and the edge light */
.holo-pill::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(-28deg,rgb(255 255 255 / 0) 44.4%,rgb(255 255 255 / .9) 45%,rgb(255 255 255 / 0) 45.6%),radial-gradient(ellipse 46% 174% at 15% 27%,rgb(255 255 255 / 0) 46.4%,rgb(255 255 255 / .85) 47%,rgb(255 255 255 / 0) 47.8%),radial-gradient(ellipse 39% 162% at 80% 87%,rgb(255 255 255 / 0) 42.6%,rgb(255 255 255 / .7) 43.2%,rgb(255 255 255 / 0) 44%),radial-gradient(ellipse 30% 60% at 14% 24%,rgb(255 255 255 / .5),rgb(255 255 255 / 0) 70%),linear-gradient(90deg,rgb(255 255 255 / .45),rgb(255 255 255 / 0) 10%,rgb(255 255 255 / 0) 90%,rgb(255 255 255 / .5)),linear-gradient(180deg,rgb(255 255 255 / .35),rgb(255 255 255 / 0) 30%,rgb(255 255 255 / 0) 66%,rgb(15 15 20 / .2));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),inset 0 0 0 1px rgb(255 255 255 / .3)}
/* small pill: a blue chrome torus seen from above, an orange block at the left, frost at the right end */
.holo-pill--sm{background:linear-gradient(90deg,var(--holo-orange) 0 12%,var(--holo-pink) 12% 13.5%,rgb(255 255 255 / 0) 13.5%),radial-gradient(circle at 46% 56%,rgb(255 255 255 / .95) 0 9%,var(--hs-chrome-1) 12%,var(--holo-blue) 20%,var(--holo-deep) 34%,var(--holo-blue) 46%,var(--hs-blue-l) 58%,rgb(255 255 255 / .6) 66%,var(--hs-pink-l) 80%,var(--holo-ice))}
.holo-pill--sm::before{background:conic-gradient(from 200deg at 46% 56%,rgb(255 255 255 / 0) 0 40%,rgb(255 255 255 / .6) 52%,rgb(255 255 255 / 0) 64%),radial-gradient(circle at 46% 56%,rgb(255 255 255 / 0) 0 42%,rgb(15 15 20 / .32) 46%,rgb(255 255 255 / 0) 52%)}
.holo-pill--sm::after{background:linear-gradient(90deg,rgb(255 255 255 / 0) 62%,rgb(255 255 255 / .55)),linear-gradient(180deg,rgb(255 255 255 / .3),rgb(255 255 255 / 0) 35%,rgb(255 255 255 / 0) 70%,rgb(15 15 20 / .18))}

/* ---------- .glass-bar: dark frosted pill bar, three segments with hairlines between ---------- */
.glass-bar{display:inline-flex;align-items:center;padding:4px;border-radius:var(--r-pill);color:var(--on-dark);font-size:.9rem;font-weight:500;line-height:1;white-space:nowrap;
  background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / 0) 55%),rgb(15 15 20 / .46);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 0 0 1px rgb(255 255 255 / .1),0 24px 48px -24px rgb(0 0 0 / .7)}
.glass-bar>span{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill)}
.glass-bar>span+span::before{content:"";position:absolute;left:0;top:26%;bottom:26%;width:1px;background:rgb(255 255 255 / .16)}
.glass-bar .ic{font-size:1em;opacity:.9}
.glass-bar__more{padding:10px 12px}

/* ---------- .glyph: 28px 3D glass icons for the hero feature row ---------- */
.glyph{position:relative;display:block;flex:none;width:28px;height:28px}
.glyph::before,.glyph::after{content:"";position:absolute}
.glyph--cube{width:14px;height:14px;margin:7px;transform-style:preserve-3d;transform:rotateX(-28deg) rotateY(-38deg);background:var(--hs-grid),linear-gradient(160deg,var(--hs-blue-l),var(--holo-blue) 65%,var(--hs-blue-d))}
.glyph--cube::before{inset:0 auto 0 100%;width:100%;transform-origin:0 50%;transform:rotateY(90deg);background:var(--hs-grid),linear-gradient(100deg,var(--holo-blue),var(--hs-blue-d))}
.glyph--cube::after{inset:auto 0 100% 0;height:100%;transform-origin:50% 100%;transform:rotateX(90deg);background:var(--hs-grid),linear-gradient(0deg,var(--glass-white),var(--hs-blue-l) 60%,var(--holo-blue))}
.glyph--orb{border-radius:50%;
  background:radial-gradient(circle at 33% 28%,rgb(255 255 255 / .98) 0,rgb(255 255 255 / .5) 8%,rgb(255 255 255 / 0) 24%),linear-gradient(174deg,rgb(255 255 255 / 0) 44%,rgb(255 255 255 / .5) 48%,rgb(15 15 20 / .3) 50.5%,rgb(15 15 20 / 0) 62%),radial-gradient(ellipse 120% 46% at 50% 114%,var(--holo-blue) 30%,var(--holo-pink) 46%,rgb(255 255 255 / 0) 60%),radial-gradient(circle at 36% 30%,var(--glass-white) 0,var(--hs-chrome-1) 18%,var(--hs-chrome-2) 50%,var(--hs-chrome-3) 80%);
  box-shadow:inset -3px -4px 6px rgb(15 15 20 / .35),inset 2px 2px 4px rgb(255 255 255 / .6),0 4px 8px -3px rgb(15 15 20 / .3)}
.glyph--orb::before{inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgb(255 255 255 / 0) 0 24%,rgb(255 255 255 / .95) 38%,rgb(255 255 255 / 0) 52%);
  -webkit-mask:radial-gradient(closest-side,transparent 80%,#000 88%,#000 95%,transparent 100%);mask:radial-gradient(closest-side,transparent 80%,#000 88%,#000 95%,transparent 100%)}
.glyph--orb::after{left:7px;top:5px;width:6px;height:3px;border-radius:50%;background:var(--glass-white);transform:rotate(-28deg)}
.glyph--ribbon::before{left:-2px;top:8px;width:32px;height:11px;border-radius:6px;transform:rotate(-32deg);box-shadow:0 3px 6px -2px rgb(15 15 20 / .35);
  background:linear-gradient(180deg,rgb(255 255 255 / .6),rgb(255 255 255 / 0) 40%,rgb(15 15 20 / .2)),linear-gradient(90deg,var(--holo-orange),var(--holo-pink) 50%,var(--holo-purple))}
.glyph--ribbon::after{left:-2px;top:9px;width:32px;height:11px;border-radius:6px;transform:rotate(28deg);opacity:.92;
  background:linear-gradient(180deg,rgb(255 255 255 / .55),rgb(255 255 255 / 0) 40%,rgb(15 15 20 / .2)),linear-gradient(90deg,var(--holo-cyan),var(--holo-blue) 50%,var(--holo-deep))}

/* ---------- .tile__shapes: the grey bento tile's big glass objects, bottom-right and clipped ---------- */
.tile__shapes{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;isolation:isolate;border-radius:inherit;pointer-events:none;font-size:clamp(.7rem,1.6vw,1.1rem)}
.tile__shapes .hs--orb-b{left:auto;top:auto;right:-14%;bottom:-8%;width:66%}
.tile__shapes .hs--panel{left:auto;right:-6%;top:-6%;width:46%;height:24%;transform:rotate(-5deg)}
.tile__shapes .hs--panel::before{left:-186%;bottom:-262%;width:54%;height:120%}   /* the lone orange pane at the tile's lower-left */
.tile__shapes .hs--panel::after{display:none}