/* SILITUZ modern preview layer – isolated so it can be reviewed before going live */
:root {
  --sili-ink: #e8f5ff;
  --sili-muted: #9cb4c8;
  --sili-night: #020817;
  --sili-panel: rgba(7, 23, 38, .78);
  --sili-line: rgba(45, 212, 191, .2);
  --sili-emerald: #19d6a2;
  --sili-cyan: #35c9ff;
  --sili-violet: #8b7cff;
}
html { scroll-behavior: smooth; }
body {
  cursor: auto !important;
  background:
    radial-gradient(circle at 12% 6%, rgba(25,214,162,.08), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(53,201,255,.07), transparent 32rem),
    var(--sili-night);
}
a, button, select, [role="button"] { cursor: pointer !important; }
input, textarea { cursor: text !important; }

.sili-scroll-progress {
  position: fixed; inset: 0 auto auto 0; z-index: 10000;
  width: 0; height: 3px;
  background: linear-gradient(90deg, var(--sili-emerald), var(--sili-cyan), var(--sili-violet));
  box-shadow: 0 0 18px rgba(53,201,255,.7);
}
.sili-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.sili-reveal.is-visible { opacity: 1; transform: none; }

.sili-glass {
  border: 1px solid var(--sili-line);
  background: linear-gradient(145deg, rgba(8,29,43,.9), rgba(3,12,25,.72));
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(130%);
}
.sili-kicker {
  color: var(--sili-emerald); font-size: .72rem; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase;
}
.sili-gradient-text {
  color: transparent;
  background: linear-gradient(110deg, #f1fbff 10%, var(--sili-cyan) 48%, var(--sili-emerald) 90%);
  -webkit-background-clip: text; background-clip: text;
}

.silituz-now { position: relative; padding: 4.5rem 1rem 2rem; overflow: hidden; }
.silituz-now::before {
  content: ""; position: absolute; width: 34rem; height: 34rem; right: -17rem; top: -18rem;
  border-radius: 50%; border: 1px solid rgba(53,201,255,.12);
  box-shadow: 0 0 0 70px rgba(25,214,162,.025), 0 0 0 140px rgba(53,201,255,.018);
}
.silituz-now__inner { position: relative; max-width: 74rem; margin: auto; }
.silituz-now__head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.silituz-now__head h2 { margin: .35rem 0 0; font-size: clamp(2rem,5vw,4.4rem); line-height: .95; font-weight: 900; letter-spacing: -.05em; }
.silituz-now__live { display: inline-flex; align-items: center; gap: .5rem; color: var(--sili-muted); font-size: .82rem; }
.silituz-now__live i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--sili-emerald); box-shadow: 0 0 16px var(--sili-emerald); animation: siliPulse 2s ease-in-out infinite; }
.silituz-now__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.silituz-now__card {
  min-height: 13rem; padding: 1.35rem; border-radius: 1.35rem; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; color: var(--sili-ink);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.silituz-now__card:hover { transform: translateY(-5px); border-color: rgba(53,201,255,.48); box-shadow: 0 28px 65px rgba(0,0,0,.35), 0 0 30px rgba(53,201,255,.08); }
.silituz-now__card--feature { grid-row: span 2; min-height: 27rem; background:
  linear-gradient(180deg, rgba(2,8,23,.1), rgba(2,8,23,.92)),
  url("/assets/images/Kachel 3.svg") center/cover; }
.silituz-now__card--news { background:
  linear-gradient(115deg, rgba(1,14,25,.96), rgba(1,14,25,.48)),
  url("/assets/images/silituz-news-squad.webp") center/cover; }
.silituz-now__card--gallery { background:
  linear-gradient(115deg, rgba(1,14,25,.96), rgba(1,14,25,.45)),
  url("/assets/images/silituz3.3.webp") center/cover; }
.silituz-now__card h3 { margin: .55rem 0; color: #fff; font-size: clamp(1.25rem,2.3vw,2rem); line-height: 1.05; font-weight: 850; }
.silituz-now__card p { margin: 0; max-width: 34rem; color: #c1d1df; line-height: 1.55; }
.silituz-now__cta { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.2rem; color: var(--sili-cyan); font-weight: 800; }
.silituz-now__countdown { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-top: 1.25rem; }
.silituz-now__countdown span { padding: .75rem .35rem; border-radius: .85rem; background: rgba(2,8,23,.72); border: 1px solid rgba(53,201,255,.18); text-align:center; }
.silituz-now__countdown b { display:block; color:#fff; font-size:1.45rem; }
.silituz-now__countdown small { color:var(--sili-muted); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }

.page-music #upcoming-releases, .page-gallery [data-gallery="silituz"] {
  position: relative;
}
.sili-release-focus { max-width: 74rem; margin: 3rem auto 0; padding: 0 1rem; }
.sili-release-focus__card { display:grid; grid-template-columns: minmax(15rem,.8fr) 1.2fr; overflow:hidden; border-radius:1.6rem; }
.sili-release-focus__art { min-height: 23rem; background: linear-gradient(140deg,rgba(25,214,162,.08),rgba(53,201,255,.18)), url("/assets/images/Kachel 3.svg") center/cover; }
.sili-release-focus__copy { padding: clamp(1.5rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:center; }
.sili-release-focus__copy h2 { margin:.45rem 0 1rem; font-size:clamp(2rem,5vw,4rem); line-height:.95; font-weight:900; letter-spacing:-.045em; }
.sili-release-focus__actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.sili-btn { display:inline-flex; align-items:center; gap:.55rem; padding:.75rem 1rem; border-radius:.8rem; border:1px solid rgba(53,201,255,.3); color:#eaffff; background:rgba(53,201,255,.08); font-weight:750; }
.sili-btn--primary { color:#02111a; background:linear-gradient(110deg,var(--sili-emerald),var(--sili-cyan)); border:0; }
.sili-release-timeline { display:flex; gap:.65rem; overflow:auto; margin-top:1.5rem; padding-bottom:.35rem; }
.sili-release-timeline span { flex:0 0 auto; padding:.55rem .8rem; border-radius:999px; border:1px solid var(--sili-line); color:var(--sili-muted); font-size:.78rem; }
.sili-release-timeline span.is-current { color:#03121c; background:var(--sili-emerald); border-color:transparent; font-weight:800; }

.sili-gallery-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem; margin:-1rem auto 2rem; }
.sili-gallery-tools button { padding:.65rem .9rem; border:1px solid var(--sili-line); border-radius:999px; color:var(--sili-muted); background:rgba(8,29,43,.7); }
.sili-gallery-tools button:hover, .sili-gallery-tools button.is-active { color:#03121c; background:var(--sili-emerald); }
[data-gallery="silituz"] img { border:1px solid rgba(53,201,255,.12); box-shadow:0 16px 40px rgba(0,0,0,.22); }
.sili-favorite { position:absolute; top:.65rem; right:.65rem; z-index:2; width:2.4rem; height:2.4rem; border-radius:50%; background:rgba(2,8,23,.74); color:white; border:1px solid rgba(255,255,255,.18); }
.sili-favorite.is-saved { color:#ff79b8; background:rgba(55,8,35,.9); }
.sili-gallery-item { position:relative; }
.sili-gallery-item.is-hidden { display:none; }

.site-lil-sili__context { margin: 0 0 .75rem; padding: .75rem; border-radius: .8rem; border: 1px solid rgba(53,201,255,.2); background: rgba(53,201,255,.06); }
.site-lil-sili__context strong { display:block; color:var(--sili-cyan); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.site-lil-sili__context span { display:block; margin-top:.25rem; color:#d8e8f2; font-size:.86rem; }

@keyframes siliPulse { 50% { opacity:.45; transform:scale(.8); } }
@media (max-width: 820px) {
  .silituz-now__grid { grid-template-columns:1fr; }
  .silituz-now__card--feature { grid-row:auto; min-height:22rem; }
  .silituz-now__head { align-items:start; flex-direction:column; }
  .sili-release-focus__card { grid-template-columns:1fr; }
  .sili-release-focus__art { min-height:18rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .sili-reveal { opacity:1; transform:none; }
}

.sili-lightbox-info {
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  width:min(90vw,38rem); padding:.8rem 1rem; border:1px solid rgba(53,201,255,.25);
  border-radius:1rem; background:rgba(2,8,23,.82); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; color:#dcecf5;
}
.sili-lightbox-info strong { color:#fff; }
.sili-lightbox-info span { color:var(--sili-cyan); font-size:.75rem; letter-spacing:.1em; }


/* Modern chapter openers for the remaining main areas */
.sili-page-feature {
  position: relative;
  max-width: 74rem;
  margin: 3rem auto 1.5rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 1.75rem;
  overflow: hidden;
}
.sili-page-feature::before {
  content: "";
  position: absolute;
  width: 25rem;
  height: 25rem;
  right: -12rem;
  top: -13rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,201,255,.15), transparent 66%);
  pointer-events: none;
}
.sili-feature-copy { position: relative; max-width: 49rem; z-index: 2; }
.sili-feature-copy h2 {
  margin: .55rem 0 1rem;
  font-size: clamp(2.35rem, 6vw, 5.6rem);
  line-height: .92;
  letter-spacing: -.055em;
  font-weight: 950;
}
.sili-feature-copy > p {
  color: #bfd1df;
  font-size: clamp(1rem, 1.8vw, 1.16rem);
  line-height: 1.72;
}
.sili-feature-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
  margin-top: 2rem;
}
.sili-feature-card {
  min-width: 0;
  min-height: 11rem;
  padding: 1.2rem;
  border: 1px solid rgba(53,201,255,.16);
  border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(10,35,49,.78), rgba(3,13,25,.72));
  color: #eaf7ff;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
a.sili-feature-card { display: block; text-decoration: none; }
.sili-feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(25,214,162,.56);
  box-shadow: 0 20px 45px rgba(0,0,0,.28), 0 0 26px rgba(25,214,162,.08);
}
.sili-feature-card i {
  display: inline-flex;
  min-width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0 .6rem;
  border-radius: .7rem;
  color: #04151d;
  background: linear-gradient(120deg, var(--sili-emerald), var(--sili-cyan));
  font-size: .78rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .08em;
}
.sili-feature-card h3 { margin: 1rem 0 .45rem; color: #fff; font-size: 1.12rem; font-weight: 850; }
.sili-feature-card p { margin: 0; color: var(--sili-muted); font-size: .9rem; line-height: 1.55; }

.page-about .sili-about-feature {
  background:
    linear-gradient(120deg, rgba(2,15,27,.88), rgba(5,22,36,.62)),
    url("/assets/images/about-head.svg") center/cover;
}
.page-about .sili-about-feature::after {
  content: "S";
  position: absolute;
  right: 3%;
  bottom: -3.4rem;
  color: rgba(53,201,255,.035);
  font-size: 24rem;
  line-height: 1;
  font-weight: 1000;
  pointer-events: none;
}

.page-generators .sili-lab-feature {
  background:
    linear-gradient(115deg, rgba(2,12,24,.94), rgba(7,31,43,.75)),
    radial-gradient(circle at 78% 25%, rgba(139,124,255,.2), transparent 26rem);
}
.page-generators .sili-lab-feature::after {
  content: "</>";
  position: absolute;
  right: 4%;
  top: 11%;
  color: rgba(53,201,255,.065);
  font: 950 clamp(5rem, 15vw, 12rem)/1 monospace;
  transform: rotate(-8deg);
  pointer-events: none;
}
.page-generators .sili-feature-card:nth-child(2) i { background: linear-gradient(120deg, #8b7cff, #35c9ff); }
.page-generators .sili-feature-card:nth-child(3) i { background: linear-gradient(120deg, #ff9b54, #ffd166); }

.sili-signal-feature {
  display: grid;
  grid-template-columns: minmax(17rem, .85fr) 1.15fr;
  align-items: center;
  gap: 2rem;
  min-height: 35rem;
}
.sili-signal-orbit {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  margin: auto;
  border: 1px solid rgba(53,201,255,.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,214,162,.08), transparent 48%);
}
.sili-signal-orbit::before,
.sili-signal-orbit::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(25,214,162,.17);
  border-radius: 50%;
  animation: siliOrbitSpin 28s linear infinite;
}
.sili-signal-orbit::after { inset: 32%; animation-direction: reverse; animation-duration: 18s; }
.sili-signal-core {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: 7rem;
  height: 7rem;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: .28rem;
  border: 1px solid rgba(53,201,255,.62);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(25,214,162,.2), rgba(53,201,255,.18));
  box-shadow: 0 0 0 12px rgba(53,201,255,.04), 0 0 55px rgba(53,201,255,.38);
  animation: siliCorePulse 3.6s ease-in-out infinite;
}
.sili-signal-core img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.sili-signal-orbit a {
  position: absolute;
  z-index: 4;
  min-width: 8.4rem;
  padding: .75rem;
  border: 1px solid rgba(53,201,255,.18);
  border-radius: 1rem;
  color: #fff;
  background: rgba(3,15,27,.9);
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  text-align: left;
  transition: transform .25s ease, border-color .25s ease;
}
.sili-signal-orbit a:hover { transform: scale(1.06); border-color: var(--sili-cyan); }
.sili-signal-orbit a i { width: 1.3rem; color: var(--sili-cyan); font-size: 1.1rem; }
.sili-signal-orbit a b { margin-left: .25rem; font-size: .88rem; }
.sili-signal-orbit a small { display: block; margin-top: .3rem; color: var(--sili-muted); font-size: .58rem; letter-spacing: .11em; }
.signal-tiktok { left: 3%; top: 18%; }
.signal-spotify { right: 1%; top: 14%; }
.signal-youtube { right: -2%; bottom: 17%; }
.signal-instagram { left: 3%; bottom: 13%; }
.signal-discord { left: 50%; top: 2%; transform: translateX(-50%); }
.signal-discord:hover { transform: translateX(-50%) scale(1.06) !important; }

.page-support .sili-support-feature {
  background:
    linear-gradient(120deg, rgba(2,14,25,.95), rgba(2,28,38,.75)),
    radial-gradient(circle at 90% 10%, rgba(25,214,162,.22), transparent 30rem);
}
.page-support .sili-feature-card:nth-child(1) i { background: linear-gradient(120deg, #ff4d6d, #ffb86b); }
.page-support .sili-feature-card:nth-child(2) i { background: linear-gradient(120deg, #35c9ff, #8b7cff); }
.page-support .sili-feature-card:nth-child(3) {
  border-color: rgba(25,214,162,.42);
  background: linear-gradient(145deg, rgba(12,58,53,.75), rgba(3,20,27,.82));
}
.page-support .sili-feature-card:nth-child(3) i { box-shadow: 0 0 24px rgba(25,214,162,.45); }

.page-contact .sili-contact-feature {
  background:
    linear-gradient(120deg, rgba(2,12,24,.94), rgba(4,27,39,.8)),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(53,201,255,.025) 49px 50px);
}
.page-contact .sili-contact-feature::after {
  content: "@";
  position: absolute;
  right: 5%;
  top: 6%;
  color: rgba(53,201,255,.055);
  font-size: clamp(8rem, 22vw, 17rem);
  line-height: 1;
  font-weight: 1000;
  pointer-events: none;
}

/* Epic Shoutout Hall of Legends */
.page-shoutout {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,193,77,.075), transparent 36rem),
    radial-gradient(circle at 12% 34%, rgba(139,124,255,.08), transparent 30rem),
    var(--sili-night);
}
.sili-legends-feature {
  min-height: 40rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.5rem;
  border-color: rgba(255,205,100,.28);
  background:
    linear-gradient(115deg, rgba(2,8,19,.97), rgba(6,22,34,.84)),
    radial-gradient(circle at 76% 44%, rgba(255,191,74,.16), transparent 22rem);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px rgba(255,230,165,.08);
}
.sili-legends-feature::before {
  width: 38rem;
  height: 38rem;
  right: -12rem;
  top: -12rem;
  background: radial-gradient(circle, rgba(255,196,92,.13), transparent 64%);
}
.sili-legends-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(115deg, transparent 36%, rgba(255,227,154,.08) 50%, transparent 64%),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.018) 60px);
  pointer-events: none;
}
.sili-legends-feature .sili-kicker { color: #ffd57b; text-shadow: 0 0 20px rgba(255,201,92,.42); }
.sili-legends-feature .sili-gradient-text {
  background-image: linear-gradient(110deg, #fff8e7, #ffd57b 48%, #53e7d1 94%);
}
.sili-legends-honor {
  display: block;
  margin: 1.35rem 0;
  color: #ffd57b;
  font-size: .7rem;
  letter-spacing: .22em;
}
.sili-legends-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 31rem);
  aspect-ratio: 1;
  margin: auto;
  perspective: 900px;
}
.sili-legends-stage::before {
  content: "";
  position: absolute;
  inset: 48% 7% 4%;
  border: 1px solid rgba(255,207,111,.28);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,194,77,.2), rgba(4,14,24,.7) 60%, transparent 72%);
  transform: rotateX(67deg);
  box-shadow: 0 0 60px rgba(255,189,60,.16);
}
.legend-avatar {
  position: absolute;
  z-index: 4;
  width: 9rem;
  height: 9rem;
  border: 2px solid rgba(255,214,125,.8);
  border-radius: 50%;
  background: #07121d;
  box-shadow: 0 0 0 8px rgba(255,210,113,.04), 0 25px 55px rgba(0,0,0,.45), 0 0 35px rgba(255,194,77,.15);
}
.legend-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.legend-avatar span {
  position: absolute;
  left: 50%;
  top: calc(100% + .7rem);
  transform: translateX(-50%);
  padding: .3rem .65rem;
  border: 1px solid rgba(255,214,125,.3);
  border-radius: 999px;
  color: #ffe2a3;
  background: rgba(4,12,22,.86);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .08em;
  white-space: nowrap;
}
.legend-avatar-ice { left: 50%; top: 11%; width: 12rem; height: 12rem; transform: translateX(-50%); animation: siliLegendFloatMain 4.5s ease-in-out infinite; }
.legend-avatar-red { left: 3%; top: 46%; animation: siliLegendFloat 5.2s ease-in-out .5s infinite; }
.legend-avatar-wolf { right: 3%; top: 46%; animation: siliLegendFloat 5.6s ease-in-out 1s infinite; }
.legend-orbit {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,214,125,.13);
  border-radius: 50%;
  animation: siliOrbitSpin 26s linear infinite;
}
.legend-orbit-two { inset: 25%; border-style: dashed; animation-direction: reverse; animation-duration: 17s; }
.sili-legends-stars {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    radial-gradient(circle at 12% 22%, #ffd57b 0 1px, transparent 2px),
    radial-gradient(circle at 27% 78%, #53e7d1 0 1px, transparent 2px),
    radial-gradient(circle at 73% 16%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 67%, #ffd57b 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 52% 48%, #fff 0 1px, transparent 2px);
  background-size: 170px 160px, 210px 190px, 150px 140px, 240px 220px, 190px 180px;
  animation: siliStars 10s ease-in-out infinite alternate;
}
.page-shoutout main > section:not(.sili-legends-feature):not(:first-child) {
  position: relative;
}
.page-shoutout .sili-legend-profile {
  border-radius: 1.4rem;
  transition: transform .35s ease, filter .35s ease;
}
.page-shoutout .sili-legend-profile:hover {
  transform: translateY(-7px) scale(1.015);
  filter: drop-shadow(0 18px 28px rgba(255,197,80,.16));
}
.page-shoutout .sili-legend-profile img {
  border-color: rgba(255,210,113,.52) !important;
  box-shadow: 0 0 0 5px rgba(255,210,113,.035), 0 20px 45px rgba(0,0,0,.28);
}
.page-shoutout main h2 {
  text-shadow: 0 0 24px rgba(25,214,162,.12);
}

@keyframes siliOrbitSpin { to { transform: rotate(360deg); } }
@keyframes siliCorePulse { 50% { box-shadow: 0 0 0 18px rgba(53,201,255,.025), 0 0 72px rgba(53,201,255,.48); } }
@keyframes siliLegendFloat { 50% { transform: translateY(-8px); } }
@keyframes siliLegendFloatMain { 0%, 100% { transform: translateX(-50%); } 50% { transform: translate(-50%, -8px); } }
@keyframes siliStars { to { opacity: .85; transform: translateY(-6px); } }

@media (max-width: 880px) {
  .sili-feature-grid { grid-template-columns: 1fr; }
  .sili-feature-card { min-height: auto; }
  .sili-signal-feature, .sili-legends-feature { grid-template-columns: 1fr; }
  .sili-signal-feature { padding-bottom: 2rem; }
  .sili-signal-orbit { width: min(100%, 30rem); }
  .sili-legends-stage { width: min(100%, 28rem); }
}
@media (max-width: 560px) {
  .sili-page-feature { margin: 1.5rem .75rem 1rem; padding: 1.25rem; border-radius: 1.35rem; }
  .sili-feature-copy h2 { font-size: clamp(2.15rem, 13vw, 3.6rem); }
  .sili-signal-orbit { transform: scale(.92); margin-block: -1rem; }
  .sili-signal-orbit a { min-width: 7.3rem; padding: .6rem; }
  .sili-signal-orbit a small { display: none; }
  .legend-avatar-ice { width: 9.5rem; height: 9.5rem; }
  .legend-avatar-red, .legend-avatar-wolf { width: 7rem; height: 7rem; }
  .legend-avatar span { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sili-signal-orbit::before, .sili-signal-orbit::after, .sili-signal-core,
  .legend-orbit, .legend-avatar, .sili-legends-stars { animation: none !important; }
}


/* Stronger About chapter */
.page-about {
  background:
    radial-gradient(circle at 84% 18%, rgba(53,201,255,.08), transparent 28rem),
    radial-gradient(circle at 12% 62%, rgba(139,124,255,.07), transparent 30rem),
    var(--sili-night);
}
.page-about .sili-about-feature {
  min-height: 39rem;
  border-color: rgba(25,214,162,.25);
}
.sili-about-intro {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .75fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.sili-about-signature {
  display: inline-flex;
  margin-top: 1.35rem;
  padding: .48rem .75rem;
  border: 1px solid rgba(25,214,162,.28);
  border-radius: 999px;
  color: #78ead1;
  background: rgba(2,16,25,.52);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .16em;
}
.sili-about-portrait {
  position: relative;
  width: min(100%, 23rem);
  aspect-ratio: 1;
  margin: auto;
  display: grid;
  place-items: center;
}
.sili-about-portrait::before {
  content: "";
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(53,201,255,.2);
  border-radius: 38% 62% 62% 38% / 46% 42% 58% 54%;
  background: radial-gradient(circle at 50% 45%, rgba(25,214,162,.2), rgba(3,15,27,.72) 62%);
  animation: siliPortraitMorph 9s ease-in-out infinite alternate;
}
.sili-about-portrait img {
  position: relative;
  z-index: 2;
  width: 76%;
  height: 76%;
  object-fit: cover;
  border: 1px solid rgba(129,238,218,.35);
  border-radius: 50%;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 42px rgba(25,214,162,.14);
}
.sili-about-portrait b {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 12%;
  padding: .45rem .7rem;
  border-radius: .6rem;
  color: #03131b;
  background: linear-gradient(110deg, #4fe0c1, #56cfff);
  font-size: .58rem;
  letter-spacing: .13em;
  transform: rotate(-4deg);
}
.sili-about-ring {
  position: absolute;
  z-index: 1;
  inset: 12%;
  border: 1px dashed rgba(83,214,255,.3);
  border-radius: 50%;
  animation: siliOrbitSpin 24s linear infinite;
}
.page-about .sili-about-story {
  padding-inline: clamp(.75rem, 4vw, 2rem);
}
.page-about .sili-about-story > div {
  padding: clamp(1.3rem, 3vw, 2.4rem);
  border: 1px solid rgba(53,201,255,.12);
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(7,24,38,.74), rgba(3,13,24,.62));
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
}
.page-about .sili-about-story img {
  transition: transform .55s ease, filter .55s ease;
}
.page-about .sili-about-story:hover img {
  transform: scale(1.025);
  filter: saturate(1.08);
}
.page-about .sili-about-story .relative.block {
  border-color: rgba(53,201,255,.14) !important;
  background: rgba(4,18,30,.72) !important;
}

/* Stronger Contact chapter and form */
.page-contact {
  background:
    radial-gradient(circle at 78% 20%, rgba(53,201,255,.08), transparent 28rem),
    radial-gradient(circle at 8% 72%, rgba(25,214,162,.07), transparent 30rem),
    var(--sili-night);
}
.page-contact .sili-contact-feature {
  min-height: 34rem;
  border-color: rgba(53,201,255,.24);
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}
.sili-contact-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
}
.sili-contact-beacon {
  position: relative;
  width: 9rem;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  border: 1px solid rgba(53,201,255,.24);
  border-radius: 50%;
  color: #dffbff;
  background: radial-gradient(circle, rgba(25,214,162,.16), rgba(3,14,24,.74) 64%);
  box-shadow: 0 0 45px rgba(53,201,255,.12);
  text-align: center;
}
.sili-contact-beacon::before,
.sili-contact-beacon::after {
  content: "";
  position: absolute;
  inset: -12%;
  border: 1px solid rgba(53,201,255,.15);
  border-radius: 50%;
  animation: siliBeacon 2.8s ease-out infinite;
}
.sili-contact-beacon::after { animation-delay: 1.4s; }
.sili-contact-beacon span {
  width: .65rem;
  height: .65rem;
  margin: 0 auto .45rem;
  border-radius: 50%;
  background: #38efbd;
  box-shadow: 0 0 18px #38efbd;
}
.sili-contact-beacon b { font-size: .74rem; letter-spacing: .16em; }
.sili-contact-beacon small { margin-top: .25rem; color: #79cfe0; font-size: .52rem; letter-spacing: .1em; }
.page-contact .sili-contact-panel {
  position: relative;
  margin: 0 !important;
  padding: clamp(1.4rem, 4vw, 2.6rem);
  border: 1px solid rgba(53,201,255,.18);
  border-radius: 1.6rem;
  background: linear-gradient(145deg, rgba(7,25,39,.9), rgba(3,13,24,.86));
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  overflow: hidden;
}
.page-contact .sili-contact-panel::before {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  right: -9rem;
  top: -10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,214,162,.14), transparent 70%);
  pointer-events: none;
}
.page-contact .sili-contact-panel h2 {
  position: relative;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.page-contact .sili-contact-form-modern {
  position: relative;
}
.page-contact .sili-contact-form-modern label { color: #bcd1dc !important; font-weight: 700; }
.page-contact .sili-contact-form-modern input:not([type="checkbox"]),
.page-contact .sili-contact-form-modern textarea {
  color: #eefaff;
  border-color: rgba(83,201,255,.2);
  background: rgba(1,10,20,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.page-contact .sili-contact-form-modern input:not([type="checkbox"]):focus,
.page-contact .sili-contact-form-modern textarea:focus {
  border-color: #35c9ff;
  box-shadow: 0 0 0 3px rgba(53,201,255,.11), 0 10px 30px rgba(0,0,0,.2);
  transform: translateY(-1px);
}
.page-contact .sili-contact-form-modern button[type="submit"] {
  min-width: 10rem;
  justify-content: center;
  border-radius: .85rem;
  color: #03141b;
  background: linear-gradient(110deg, #38efbd, #35c9ff);
  box-shadow: 0 12px 35px rgba(53,201,255,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-contact .sili-contact-form-modern button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(53,201,255,.28);
}
@keyframes siliPortraitMorph {
  to { border-radius: 60% 40% 38% 62% / 42% 58% 42% 58%; transform: rotate(7deg); }
}
@keyframes siliBeacon {
  0% { opacity: .7; transform: scale(.72); }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (max-width: 760px) {
  .sili-about-intro { grid-template-columns: 1fr; }
  .sili-about-portrait { width: min(82vw, 20rem); }
  .sili-contact-head { grid-template-columns: 1fr; }
  .sili-contact-beacon { width: 7.5rem; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sili-about-ring, .sili-about-portrait::before,
  .sili-contact-beacon::before, .sili-contact-beacon::after { animation: none !important; }
}


/* =========================================================
   HALL OF LEGENDS — OVERDRIVE PREVIEW
   Cinematic entrance, legendary trinity and constellation wall
   ========================================================= */
.page-shoutout {
  --legend-gold: #ffd36b;
  --legend-gold-hot: #ffad32;
  --legend-cyan: #54f4e2;
  --legend-violet: #9c7cff;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,183,50,.12), transparent 34rem),
    radial-gradient(circle at 8% 42%, rgba(84,244,226,.07), transparent 34rem),
    radial-gradient(circle at 90% 72%, rgba(156,124,255,.08), transparent 38rem),
    #020713;
}
.page-shoutout main > section:first-child {
  min-height: clamp(30rem, 76vh, 52rem);
  height: auto !important;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,211,107,.18);
}
.page-shoutout main > section:first-child::before,
.page-shoutout main > section:first-child::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.page-shoutout main > section:first-child::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,7,19,.12), rgba(2,7,19,.72)),
    radial-gradient(circle at 50% 50%, transparent 20%, rgba(2,7,19,.48) 82%);
}
.page-shoutout main > section:first-child::after {
  left: 50%;
  bottom: -11rem;
  width: min(94vw, 75rem);
  height: 19rem;
  border: 1px solid rgba(255,211,107,.2);
  border-radius: 50%;
  transform: translateX(-50%) rotateX(70deg);
  background: radial-gradient(ellipse, rgba(255,177,45,.18), transparent 64%);
  box-shadow: 0 0 90px rgba(255,173,50,.13);
}
.page-shoutout main > section:first-child > img {
  transform: scale(1.08);
  animation: siliHeroBreath 13s ease-in-out infinite alternate;
}
.page-shoutout main > section:first-child > div {
  z-index: 3;
}
.page-shoutout main > section:first-child h1 {
  text-shadow: 0 0 36px rgba(25,214,162,.3), 0 8px 30px rgba(0,0,0,.7);
}

.sili-legends-overdrive {
  --spot-x: 76%;
  --spot-y: 42%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  width: min(calc(100% - 2rem), 92rem);
  max-width: 92rem;
  min-height: 54rem;
  margin: 2.2rem auto 4rem;
  padding: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(20rem, .82fr) minmax(31rem, 1.18fr);
  gap: clamp(2rem, 5vw, 6rem);
  border: 1px solid rgba(255,211,107,.3);
  border-radius: 2.4rem;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255,191,66,.22), transparent 25rem),
    linear-gradient(128deg, rgba(2,7,18,.98), rgba(4,18,31,.93) 55%, rgba(2,9,20,.98));
  box-shadow:
    0 45px 120px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,243,210,.035) inset,
    0 0 100px rgba(255,173,50,.065) inset;
  perspective: 1200px;
}
.sili-legends-overdrive::before {
  width: 48rem;
  height: 48rem;
  right: -18rem;
  top: -18rem;
  background: radial-gradient(circle, rgba(255,192,70,.18), transparent 67%);
}
.sili-legends-overdrive::after {
  opacity: .38;
  background-image:
    linear-gradient(112deg, transparent 35%, rgba(255,232,174,.11) 49%, transparent 63%),
    repeating-linear-gradient(90deg, transparent 0 71px, rgba(255,255,255,.018) 72px),
    repeating-linear-gradient(0deg, transparent 0 71px, rgba(255,255,255,.012) 72px);
  mask-image: linear-gradient(to bottom, #000, transparent 94%);
}
.sili-legends-overdrive .sili-feature-copy {
  z-index: 7;
  max-width: 38rem;
}
.sili-legends-overdrive .sili-feature-copy h2 {
  margin-top: .7rem;
  font-size: clamp(3.4rem, 7vw, 7.4rem);
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 0 0 55px rgba(255,202,93,.12);
}
.sili-legends-overdrive .sili-feature-copy > p {
  max-width: 35rem;
  color: #c8d6df;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}
.sili-legend-presents {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .75rem;
  color: rgba(255,220,144,.82);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .26em;
}
.sili-legend-presents i {
  width: 2.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--legend-gold));
  box-shadow: 0 0 12px var(--legend-gold);
}
.sili-legend-presents i:last-child { transform: scaleX(-1); }
.sili-legends-overdrive .sili-kicker {
  display: inline-flex;
  padding: .4rem .65rem;
  border: 1px solid rgba(255,211,107,.25);
  border-radius: 999px;
  background: rgba(255,183,50,.06);
  letter-spacing: .18em;
}
.sili-legend-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  max-width: 30rem;
  margin: 1.7rem 0 1rem;
}
.sili-legend-metrics > span {
  position: relative;
  padding: 1rem 1.1rem;
  overflow: hidden;
  border: 1px solid rgba(255,211,107,.16);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255,194,72,.09), rgba(4,17,29,.7));
}
.sili-legend-metrics > span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%);
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.1), transparent);
  animation: siliMetricShine 5s ease-in-out infinite;
}
.sili-legend-metrics b {
  display: block;
  color: #fff5d9;
  font-size: 1.8rem;
  line-height: 1;
}
.sili-legend-metrics small {
  display: block;
  margin-top: .45rem;
  color: #b7cbd5;
  font-size: .55rem;
  font-weight: 850;
  letter-spacing: .14em;
}
.sili-legends-overdrive .sili-legends-honor {
  max-width: 32rem;
  margin: 1.35rem 0 1.6rem;
  color: var(--legend-gold);
  line-height: 1.6;
}
.sili-legend-enter {
  position: relative;
  min-width: 16rem;
  justify-content: space-between;
  border-color: rgba(255,211,107,.46) !important;
  color: #160d02 !important;
  background: linear-gradient(115deg, #fff0bd, #ffc452 52%, #54ead8) !important;
  box-shadow: 0 18px 45px rgba(255,174,42,.22), 0 0 36px rgba(84,234,216,.1);
}
.sili-legend-enter span { animation: siliArrowDrop 1.7s ease-in-out infinite; }

.sili-legends-chapters {
  position: absolute;
  z-index: 8;
  top: 1.35rem;
  left: 50%;
  width: min(calc(100% - 4rem), 46rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(214,228,235,.58);
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .16em;
}
.sili-legends-chapters b { margin-right: .3rem; color: var(--legend-gold); }
.sili-legends-chapters i {
  flex: 1;
  max-width: 9rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,211,107,.4), transparent);
}
.sili-legends-frame { position: absolute; z-index: 5; inset: 1rem; pointer-events: none; }
.sili-legends-frame span {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-color: rgba(255,211,107,.45);
}
.sili-legends-frame span:nth-child(1) { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; border-radius: 1.1rem 0 0; }
.sili-legends-frame span:nth-child(2) { right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; border-radius: 0 1.1rem 0 0; }
.sili-legends-frame span:nth-child(3) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; border-radius: 0 0 1.1rem; }
.sili-legends-frame span:nth-child(4) { left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; border-radius: 0 0 0 1.1rem; }

.sili-cinematic-beams {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sili-cinematic-beams i {
  position: absolute;
  top: -25%;
  width: 15rem;
  height: 120%;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255,230,166,.14), rgba(255,189,55,.015) 62%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(5px);
  animation: siliBeamSweep 9s ease-in-out infinite alternate;
}
.sili-cinematic-beams i:nth-child(1) { left: 48%; transform: rotate(13deg); }
.sili-cinematic-beams i:nth-child(2) { right: 3%; transform: rotate(-18deg); animation-delay: -3s; }
.sili-cinematic-beams i:nth-child(3) { left: 10%; transform: rotate(26deg); animation-delay: -6s; opacity: .55; }

.sili-legends-overdrive .sili-legends-stage {
  z-index: 6;
  width: min(100%, 42rem);
  aspect-ratio: 1;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
}
.sili-legends-overdrive .sili-legends-stage::before {
  inset: 49% 2% 2%;
  border-color: rgba(255,211,107,.42);
  background:
    repeating-radial-gradient(ellipse, rgba(255,211,107,.13) 0 1px, transparent 2px 18px),
    radial-gradient(ellipse, rgba(255,184,50,.3), rgba(2,10,20,.86) 63%, transparent 72%);
  box-shadow: 0 0 95px rgba(255,172,39,.26), inset 0 0 65px rgba(255,211,107,.09);
}
.sili-legends-overdrive .legend-orbit {
  z-index: 1;
  inset: 6%;
  border-color: rgba(255,211,107,.22);
  box-shadow: 0 0 35px rgba(255,183,50,.05);
}
.sili-legends-overdrive .legend-orbit-two { inset: 21%; border-color: rgba(84,244,226,.19); }
.sili-legends-overdrive .legend-orbit-three {
  inset: 36%;
  border-style: dotted;
  border-color: rgba(156,124,255,.3);
  animation-direction: reverse;
  animation-duration: 11s;
}
.sili-legend-crown {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: -1%;
  width: 18rem;
  height: 6.5rem;
  transform: translateX(-50%) translateZ(45px);
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 0 18px rgba(255,194,65,.35));
}
.sili-legend-crown i {
  position: absolute;
  bottom: 1.8rem;
  width: 3.4rem;
  height: 3.8rem;
  border: 1px solid rgba(255,216,123,.75);
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255,242,202,.18), rgba(255,174,34,.04));
}
.sili-legend-crown i:nth-child(1) { left: 4rem; height: 2.7rem; }
.sili-legend-crown i:nth-child(2) { left: 7.3rem; bottom: 2.4rem; height: 4.6rem; }
.sili-legend-crown i:nth-child(3) { right: 4rem; height: 2.7rem; }
.sili-legend-crown b {
  position: absolute;
  bottom: 0;
  padding: .38rem .8rem;
  border: 1px solid rgba(255,211,107,.3);
  border-radius: 999px;
  color: #ffe6ad;
  background: rgba(3,10,21,.92);
  font-size: .58rem;
  letter-spacing: .2em;
  white-space: nowrap;
}
.sili-legend-sigil {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 49%;
  width: 7.5rem;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) translateZ(-20px) rotate(45deg);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,211,107,.3);
  background: rgba(255,188,54,.035);
  box-shadow: 0 0 45px rgba(255,182,43,.14), inset 0 0 25px rgba(84,244,226,.08);
  animation: siliSigilPulse 4s ease-in-out infinite;
}
.sili-legend-sigil b {
  transform: rotate(-45deg);
  color: rgba(255,226,159,.52);
  font-size: 2.5rem;
  font-weight: 1000;
}
.sili-legend-sigil i {
  position: absolute;
  inset: 15%;
  border: 1px dashed rgba(84,244,226,.22);
}
.sili-legend-sigil i:last-child { inset: 30%; transform: rotate(45deg); }

.sili-legends-overdrive .legend-avatar {
  z-index: 9;
  width: 10.5rem;
  height: 10.5rem;
  display: block;
  border: 0;
  color: #fff;
  text-decoration: none;
  transform-style: preserve-3d;
  background: none;
  box-shadow: none;
  transition: filter .3s ease, transform .3s ease;
}
.sili-legends-overdrive .legend-avatar img {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255,224,154,.9);
  border-radius: 50%;
  object-fit: cover;
  background: #07121d;
  box-shadow:
    0 0 0 7px rgba(255,211,107,.055),
    0 28px 65px rgba(0,0,0,.58),
    0 0 42px rgba(255,184,46,.24);
  transition: transform .35s ease, box-shadow .35s ease;
}
.sili-legends-overdrive .legend-avatar:hover img {
  transform: scale(1.055);
  box-shadow:
    0 0 0 9px rgba(255,211,107,.09),
    0 34px 75px rgba(0,0,0,.65),
    0 0 70px rgba(255,184,46,.43);
}
.sili-legends-overdrive .legend-avatar span.legend-avatar__halo {
  position: absolute;
  z-index: 1;
  inset: -10%;
  width: auto;
  height: auto;
  padding: 0;
  transform: none;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,211,107,.65), transparent 28%, rgba(84,244,226,.5), transparent 62%, rgba(156,124,255,.5), transparent);
  filter: blur(1px);
  animation: siliHaloSpin 7s linear infinite;
}
.sili-legends-overdrive .legend-avatar strong {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% + .85rem);
  transform: translateX(-50%);
  min-width: max-content;
  padding: .4rem .8rem;
  border: 1px solid rgba(255,211,107,.4);
  border-radius: .55rem;
  color: #fff0c5;
  background: linear-gradient(115deg, rgba(18,12,6,.95), rgba(3,14,25,.96));
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 20px rgba(255,181,40,.12);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
}
.sili-legends-overdrive .legend-avatar small {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% + 3.15rem);
  transform: translateX(-50%);
  color: rgba(190,212,221,.72);
  font-size: .48rem;
  font-weight: 850;
  letter-spacing: .18em;
  white-space: nowrap;
}
.sili-legends-overdrive .legend-avatar-ice {
  left: 50%;
  top: 14%;
  width: 13rem;
  height: 13rem;
  transform: translateX(-50%) translateZ(70px);
  animation: siliLegendFloatMain 4.5s ease-in-out infinite;
}
.sili-legends-overdrive .legend-avatar-red {
  left: 0;
  top: 51%;
  transform: translateZ(42px);
  animation: siliLegendFloat 5.2s ease-in-out .5s infinite;
}
.sili-legends-overdrive .legend-avatar-wolf {
  right: 0;
  top: 51%;
  transform: translateZ(42px);
  animation: siliLegendFloat 5.6s ease-in-out 1s infinite;
}
.sili-legend-pedestal {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 2%;
  width: 86%;
  height: 31%;
  transform: translateX(-50%) rotateX(66deg) translateZ(-30px);
  border: 1px solid rgba(255,211,107,.3);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,183,47,.19), rgba(2,8,18,.7) 58%, transparent 72%);
}
.sili-legend-pedestal span {
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(84,244,226,.12);
  border-radius: 50%;
}
.sili-legend-pedestal span:nth-child(2) { inset: 30%; border-color: rgba(255,211,107,.15); }
.sili-legend-pedestal span:nth-child(3) { inset: 45%; border-color: rgba(156,124,255,.18); }

.sili-legends-marquee {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,211,107,.14);
  color: rgba(255,224,153,.28);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .28em;
  white-space: nowrap;
}
.sili-legends-marquee span {
  display: block;
  width: max-content;
  padding: .72rem 0;
  animation: siliMarquee 24s linear infinite;
}

.sili-constellation-intro {
  position: relative;
  width: min(calc(100% - 2rem), 78rem);
  margin: 5rem auto 2rem;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(84,244,226,.18);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 85% 25%, rgba(84,244,226,.11), transparent 20rem),
    radial-gradient(circle at 10% 82%, rgba(156,124,255,.1), transparent 24rem),
    linear-gradient(135deg, rgba(3,15,29,.92), rgba(2,8,19,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  text-align: center;
}
.sili-constellation-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    radial-gradient(circle at 10% 20%, #54f4e2 0 1px, transparent 2px),
    radial-gradient(circle at 70% 22%, #ffd36b 0 1px, transparent 2px),
    radial-gradient(circle at 33% 78%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 91% 65%, #9c7cff 0 1.5px, transparent 2.5px);
  background-size: 170px 150px, 230px 210px, 190px 170px, 260px 220px;
}
.sili-constellation-intro > * { position: relative; z-index: 2; }
.sili-constellation-index {
  color: var(--legend-cyan);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .22em;
}
.sili-constellation-intro h2 {
  margin: .7rem 0;
  color: #f5fbff;
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 950;
  letter-spacing: -.045em;
}
.sili-constellation-intro p {
  max-width: 48rem;
  margin: 0 auto;
  color: #b8ccd7;
  line-height: 1.72;
}
.sili-constellation-intro a {
  display: inline-flex;
  margin-top: 1.5rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(84,244,226,.32);
  border-radius: 999px;
  color: #cffff8;
  background: rgba(84,244,226,.055);
  font-size: .72rem;
  font-weight: 850;
  text-decoration: none;
}

.page-shoutout .sili-community-legends {
  position: relative;
  isolation: isolate;
}
.page-shoutout .sili-community-legends::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3rem 0 0;
  background:
    radial-gradient(circle at 50% 0, rgba(84,244,226,.055), transparent 32rem),
    repeating-linear-gradient(90deg, transparent 0 109px, rgba(255,255,255,.012) 110px);
  pointer-events: none;
}
.page-shoutout .sili-legend-profile {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  transform: translateZ(0);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s ease;
}
.page-shoutout .sili-legend-profile::before,
.page-shoutout .sili-legend-profile::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px;
  border-radius: 1.55rem;
  opacity: 0;
  transition: opacity .35s ease;
}
.page-shoutout .sili-legend-profile::before {
  background: conic-gradient(from calc(var(--legend-index) * 27deg), transparent, rgba(84,244,226,.34), transparent 26%, rgba(255,211,107,.3), transparent 62%);
  filter: blur(9px);
}
.page-shoutout .sili-legend-profile::after {
  inset: 0;
  border: 1px solid rgba(84,244,226,.22);
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 49%, transparent 68%);
  background-size: 250% 100%;
}
.page-shoutout .sili-legend-profile:hover {
  z-index: 10;
  transform: translateY(-12px) scale(1.025);
  filter: drop-shadow(0 25px 45px rgba(0,0,0,.4));
}
.page-shoutout .sili-legend-profile:hover::before,
.page-shoutout .sili-legend-profile:hover::after { opacity: 1; }
.page-shoutout .sili-legend-profile:hover::after { animation: siliCardSweep 1.2s ease forwards; }
.page-shoutout .sili-legend-profile img {
  border: 2px solid rgba(255,211,107,.45) !important;
  filter: saturate(.96) contrast(1.02);
  transition: filter .4s ease, transform .4s ease, box-shadow .4s ease;
}
.page-shoutout .sili-legend-profile:hover img {
  filter: saturate(1.17) contrast(1.04);
  transform: scale(1.025);
  box-shadow: 0 0 0 6px rgba(84,244,226,.045), 0 25px 65px rgba(0,0,0,.4), 0 0 42px rgba(84,244,226,.16) !important;
}
.sili-profile-number {
  position: absolute;
  z-index: 12;
  top: 1rem;
  left: 1rem;
  padding: .35rem .55rem;
  border: 1px solid rgba(255,211,107,.35);
  border-radius: .5rem;
  color: #ffe5a7;
  background: rgba(2,8,18,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .13em;
  pointer-events: none;
}
.page-shoutout .sili-legend-profile[data-legend-name*="Red Bonita"],
.page-shoutout .sili-legend-profile[data-legend-name*="IceQueen"],
.page-shoutout .sili-legend-profile[data-legend-name*="Wolf"] {
  filter: drop-shadow(0 0 25px rgba(255,194,64,.1));
}

@keyframes siliHeroBreath {
  to { transform: scale(1.14); filter: saturate(1.08) contrast(1.04); }
}
@keyframes siliMetricShine {
  0%, 55% { transform: translateX(-110%); }
  80%, 100% { transform: translateX(130%); }
}
@keyframes siliArrowDrop {
  50% { transform: translateY(5px); }
}
@keyframes siliBeamSweep {
  to { transform: rotate(-9deg) translateX(5rem); opacity: .45; }
}
@keyframes siliHaloSpin { to { transform: rotate(360deg); } }
@keyframes siliSigilPulse {
  50% { opacity: .7; box-shadow: 0 0 70px rgba(255,182,43,.22), inset 0 0 35px rgba(84,244,226,.13); }
}
@keyframes siliMarquee { to { transform: translateX(-50%); } }
@keyframes siliCardSweep {
  from { background-position: 150% 0; }
  to { background-position: -80% 0; }
}

@media (max-width: 1040px) {
  .sili-legends-overdrive {
    grid-template-columns: 1fr;
    padding-top: 4.5rem;
  }
  .sili-legends-overdrive .sili-feature-copy {
    max-width: 55rem;
    text-align: center;
    margin-inline: auto;
  }
  .sili-legend-presents,
  .sili-legends-overdrive .sili-kicker,
  .sili-legend-metrics,
  .sili-legends-overdrive .sili-legends-honor { margin-inline: auto; }
  .sili-legend-presents { justify-content: center; }
  .sili-legend-enter { margin-inline: auto; }
  .sili-legends-overdrive .sili-legends-stage { width: min(100%, 39rem); }
}
@media (max-width: 620px) {
  .sili-legends-overdrive {
    width: calc(100% - 1rem);
    min-height: auto;
    margin: 1rem auto 2.5rem;
    padding: 4.5rem 1rem 3.2rem;
    border-radius: 1.35rem;
  }
  .sili-legends-overdrive .sili-feature-copy h2 {
    font-size: clamp(3rem, 17vw, 4.8rem);
  }
  .sili-legends-chapters {
    width: calc(100% - 2rem);
    gap: .45rem;
    font-size: .42rem;
    letter-spacing: .08em;
  }
  .sili-legends-chapters i { max-width: 2rem; }
  .sili-legend-metrics { grid-template-columns: 1fr 1fr; }
  .sili-legends-overdrive .sili-legends-stage {
    width: 100%;
    margin-top: 1.5rem;
  }
  .sili-legends-overdrive .legend-avatar-ice {
    width: 9.5rem;
    height: 9.5rem;
    top: 15%;
  }
  .sili-legends-overdrive .legend-avatar-red,
  .sili-legends-overdrive .legend-avatar-wolf {
    width: 7.2rem;
    height: 7.2rem;
    top: 53%;
  }
  .sili-legends-overdrive .legend-avatar strong {
    top: calc(100% + .55rem);
    padding: .32rem .55rem;
    font-size: .6rem;
  }
  .sili-legends-overdrive .legend-avatar small { display: none; }
  .sili-legend-crown { width: 13rem; transform: translateX(-50%) scale(.78); }
  .sili-constellation-intro {
    width: calc(100% - 1rem);
    margin-top: 2.5rem;
    border-radius: 1.35rem;
  }
  .sili-profile-number { top: .6rem; left: .6rem; font-size: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-shoutout main > section:first-child > img,
  .sili-cinematic-beams i,
  .sili-legend-metrics > span::after,
  .sili-legends-overdrive .legend-avatar,
  .sili-legends-overdrive .legend-avatar span.legend-avatar__halo,
  .sili-legend-sigil,
  .sili-legends-marquee span,
  .sili-legend-enter span { animation: none !important; }
  .sili-legends-overdrive .sili-legends-stage { transform: none !important; }
}


/* =========================================================
   HALL OF LEGENDS — EQUAL VALUE REVISION
   Compact hero, equal profiles, stable hover and fluid motion
   ========================================================= */
.page-shoutout main > section:first-child {
  min-height: clamp(20rem, 44vh, 32rem);
  height: clamp(20rem, 44vh, 32rem) !important;
}
.page-shoutout main > section:first-child > img {
  transform: scale(1.025);
  animation: siliHeroBreathCompact 18s cubic-bezier(.45,0,.55,1) infinite alternate;
}

.sili-legends-overdrive {
  min-height: 47rem;
  padding-block: clamp(3.4rem, 5vw, 4.6rem);
}
.sili-legends-overdrive .sili-legends-stage {
  transition: none;
  will-change: transform;
}
.sili-legends-chapters {
  color: rgba(231,241,246,.72);
  font-size: .56rem;
}
.sili-legends-chapters span:first-child {
  color: #ffe2a0;
  text-shadow: 0 0 18px rgba(255,196,72,.28);
}
.sili-legends-chapters span:last-child {
  color: #aafcf2;
  text-shadow: 0 0 18px rgba(84,244,226,.2);
}
.sili-legends-chapters b,
.sili-legend-metrics,
.sili-constellation-intro,
.sili-profile-number {
  display: none !important;
}

/* All three highlighted people receive exactly the same visual weight. */
.sili-legends-overdrive .legend-avatar,
.sili-legends-overdrive .legend-avatar-ice,
.sili-legends-overdrive .legend-avatar-red,
.sili-legends-overdrive .legend-avatar-wolf {
  width: 11.5rem;
  height: 11.5rem;
  will-change: transform;
  backface-visibility: hidden;
}
.sili-legends-overdrive .legend-avatar-ice {
  left: 50%;
  top: 13.5%;
  transform: translateX(-50%) translateZ(42px);
  animation: siliEqualFloatMain 8.4s cubic-bezier(.45,0,.55,1) 0s infinite;
}
.sili-legends-overdrive .legend-avatar-red {
  left: 1%;
  top: 51%;
  transform: translateZ(42px);
  animation: siliEqualFloat 8.4s cubic-bezier(.45,0,.55,1) -2.8s infinite;
}
.sili-legends-overdrive .legend-avatar-wolf {
  right: 1%;
  top: 51%;
  transform: translateZ(42px);
  animation: siliEqualFloat 8.4s cubic-bezier(.45,0,.55,1) -5.6s infinite;
}
.sili-legends-overdrive .legend-avatar img {
  transition: filter .55s ease, box-shadow .55s ease;
  will-change: filter;
}
.sili-legends-overdrive .legend-avatar:hover img {
  transform: none;
  filter: saturate(1.09) brightness(1.045);
  box-shadow:
    0 0 0 8px rgba(255,211,107,.08),
    0 30px 70px rgba(0,0,0,.62),
    0 0 74px rgba(84,244,226,.25);
}
.sili-legends-overdrive .legend-avatar span.legend-avatar__halo {
  inset: -11%;
  animation: siliHaloSpin 12s linear infinite;
  opacity: .86;
}
.sili-legends-overdrive .legend-avatar strong {
  top: calc(100% + .62rem);
  min-width: 9.25rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(255,218,130,.72);
  border-radius: .72rem;
  color: #fffdf8;
  background: rgba(2,8,17,.96);
  box-shadow:
    0 14px 34px rgba(0,0,0,.62),
    0 0 0 1px rgba(84,244,226,.08) inset,
    0 0 25px rgba(255,187,44,.18);
  font-size: .88rem;
  font-weight: 950;
  letter-spacing: .035em;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 1px 8px #000, 0 0 14px rgba(255,220,143,.3);
  transition: border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.sili-legends-overdrive .legend-avatar:hover strong {
  border-color: #75f9e9;
  color: #ffffff;
  box-shadow:
    0 16px 38px rgba(0,0,0,.68),
    0 0 0 1px rgba(117,249,233,.2) inset,
    0 0 30px rgba(84,244,226,.28);
}
.sili-legends-overdrive .legend-avatar small {
  display: none !important;
}

.sili-legends-overdrive .legend-orbit {
  animation-duration: 36s;
}
.sili-legends-overdrive .legend-orbit-two {
  animation-duration: 25s;
}
.sili-legends-overdrive .legend-orbit-three {
  animation-duration: 18s;
}
.sili-cinematic-beams i {
  animation-duration: 14s;
}
.sili-legends-stars {
  animation-duration: 16s;
}

/* Three flowing lines make the Trinity feel connected, never ranked. */
.sili-trinity-links {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  filter: drop-shadow(0 0 8px rgba(84,244,226,.35));
}
.sili-trinity-links i {
  position: absolute;
  height: 1px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(255,214,117,.45), #8bfff1, rgba(255,214,117,.45), transparent);
  background-size: 220% 100%;
  animation: siliEnergyFlow 4.8s linear infinite;
}
.sili-trinity-links i::after {
  content: "";
  position: absolute;
  inset: -3px 0;
  background: inherit;
  filter: blur(5px);
  opacity: .55;
}
.sili-trinity-links i:nth-child(1) {
  left: 24%;
  top: 43%;
  width: 29%;
  transform: rotate(-54deg);
}
.sili-trinity-links i:nth-child(2) {
  right: 24%;
  top: 43%;
  width: 29%;
  transform: rotate(54deg);
  animation-delay: -1.6s;
}
.sili-trinity-links i:nth-child(3) {
  left: 29%;
  top: 67%;
  width: 42%;
  animation-delay: -3.2s;
}

/* Stable profile interaction: glow and sweep stay inside each card. */
.page-shoutout .sili-legend-profile {
  z-index: 0;
  overflow: hidden !important;
  contain: paint;
  transform: none !important;
  border: 1px solid transparent;
  transition:
    border-color .4s ease,
    box-shadow .4s ease,
    background-color .4s ease,
    filter .4s ease;
}
.page-shoutout .sili-legend-profile > * {
  position: relative;
  z-index: 2;
}
.page-shoutout .sili-legend-profile::before,
.page-shoutout .sili-legend-profile::after {
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  filter: none;
  pointer-events: none;
}
.page-shoutout .sili-legend-profile::before {
  background:
    radial-gradient(circle at 22% 10%, rgba(84,244,226,.13), transparent 38%),
    radial-gradient(circle at 84% 90%, rgba(255,211,107,.12), transparent 42%);
}
.page-shoutout .sili-legend-profile::after {
  border: 1px solid rgba(84,244,226,.26);
  background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.12) 48%, transparent 66%);
  background-size: 260% 100%;
}
.page-shoutout .sili-legend-profile:hover {
  z-index: 1;
  transform: none !important;
  filter: none;
  border-color: rgba(84,244,226,.42);
  background-color: rgba(84,244,226,.025);
  box-shadow:
    0 18px 48px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,211,107,.1) inset,
    0 0 35px rgba(84,244,226,.1);
}
.page-shoutout .sili-legend-profile:hover::before,
.page-shoutout .sili-legend-profile:hover::after {
  opacity: 1;
}
.page-shoutout .sili-legend-profile:hover::after {
  animation: siliCardBeam 1.35s cubic-bezier(.22,.75,.2,1) forwards;
}
.page-shoutout .sili-legend-profile img,
.page-shoutout .sili-legend-profile:hover img {
  transform: none !important;
  transition: filter .45s ease, box-shadow .45s ease;
}
.page-shoutout .sili-legend-profile:hover img {
  filter: saturate(1.1) contrast(1.035) brightness(1.035);
  box-shadow:
    0 0 0 5px rgba(84,244,226,.055),
    0 22px 58px rgba(0,0,0,.34),
    0 0 36px rgba(84,244,226,.14) !important;
}

@keyframes siliHeroBreathCompact {
  to { transform: scale(1.075); filter: saturate(1.055) contrast(1.025); }
}
@keyframes siliEqualFloat {
  0%, 100% { transform: translateZ(42px) translateY(0); }
  50% { transform: translateZ(42px) translateY(-6px); }
}
@keyframes siliEqualFloatMain {
  0%, 100% { transform: translateX(-50%) translateZ(42px) translateY(0); }
  50% { transform: translateX(-50%) translateZ(42px) translateY(-6px); }
}
@keyframes siliEnergyFlow {
  to { background-position: -220% 0; }
}
@keyframes siliCardBeam {
  from { background-position: 150% 0; }
  to { background-position: -90% 0; }
}

@media (max-width: 620px) {
  .page-shoutout main > section:first-child {
    min-height: 19rem;
    height: 19rem !important;
  }
  .sili-legends-overdrive {
    padding-bottom: 3.4rem;
  }
  .sili-legends-overdrive .legend-avatar,
  .sili-legends-overdrive .legend-avatar-ice,
  .sili-legends-overdrive .legend-avatar-red,
  .sili-legends-overdrive .legend-avatar-wolf {
    width: 7.6rem;
    height: 7.6rem;
  }
  .sili-legends-overdrive .legend-avatar-ice {
    top: 15%;
  }
  .sili-legends-overdrive .legend-avatar-red,
  .sili-legends-overdrive .legend-avatar-wolf {
    top: 53%;
  }
  .sili-legends-overdrive .legend-avatar strong {
    top: calc(100% + .45rem);
    min-width: 6.8rem;
    padding: .42rem .5rem;
    font-size: .67rem;
  }
  .sili-legends-chapters {
    font-size: .43rem;
    letter-spacing: .07em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sili-trinity-links i {
    animation: none !important;
  }
}


/* =========================================================
   TRINITY FOREGROUND & PORTRAIT LUXE
   Nameplate depth fix, compact featured families and holo sweep
   ========================================================= */
.sili-legends-overdrive .sili-legends-stage {
  isolation: isolate;
  overflow: visible;
}
.sili-legends-overdrive .sili-legends-stage::before {
  z-index: 0;
  transform: rotateX(67deg) translateZ(-190px);
}
.sili-legends-overdrive .legend-orbit {
  z-index: 1;
  transform-style: preserve-3d;
}
.sili-legends-overdrive .sili-legend-pedestal {
  z-index: 2;
  bottom: -5%;
  height: 25%;
  transform: translateX(-50%) rotateX(68deg) translateZ(-190px);
  opacity: .76;
  pointer-events: none;
}
.sili-legends-overdrive .sili-legend-sigil {
  z-index: 3;
  transform: translate(-50%,-50%) translateZ(-80px) rotate(45deg);
}
.sili-legends-overdrive .sili-trinity-links {
  z-index: 4;
  transform: translateZ(-25px);
}
.sili-legends-overdrive .legend-avatar {
  z-index: 30 !important;
  overflow: visible !important;
  isolation: isolate;
}
.sili-legends-overdrive .legend-avatar img {
  z-index: 31;
}
.sili-legends-overdrive .legend-avatar span.legend-avatar__halo {
  z-index: 29;
}
.sili-legends-overdrive .legend-avatar strong {
  z-index: 100 !important;
  transform: translateX(-50%) translateZ(240px);
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  isolation: isolate;
  mix-blend-mode: normal;
  color: #ffffff;
  background:
    linear-gradient(115deg, rgba(2,7,16,.99), rgba(5,18,28,.99));
  border-color: rgba(255,220,137,.86);
  box-shadow:
    0 16px 38px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 26px rgba(255,190,52,.25);
  text-shadow:
    0 2px 5px #000,
    0 0 12px rgba(255,255,255,.24);
}
.sili-legends-overdrive .legend-avatar:hover strong {
  transform: translateX(-50%) translateZ(240px);
  background:
    linear-gradient(115deg, rgba(2,9,18,.99), rgba(6,25,32,.99));
}

/* Compact presentation for the four family / creator cards. */
.page-shoutout .sili-community-legends {
  padding-block: 3rem;
}
.page-shoutout .sili-community-legends > div > h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.page-shoutout .sili-community-legends > div > p {
  max-width: 42rem;
  margin-inline: auto;
  font-size: .98rem;
}
.page-shoutout .sili-community-legends > div > .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 1.9rem;
  align-items: start;
}
.page-shoutout .sili-community-legends .sili-legend-profile {
  width: 100%;
  min-width: 0;
  border-radius: 1.2rem;
}
.page-shoutout .sili-community-legends .sili-legend-profile > div:first-child {
  max-width: 16rem !important;
}
.page-shoutout .sili-community-legends .sili-legend-profile > div:last-child {
  max-width: 16rem !important;
  border-radius: 1rem;
}
.page-shoutout .sili-community-legends .sili-legend-profile > div:last-child > div {
  padding: 1rem .8rem;
  gap: .28rem;
}
.page-shoutout .sili-community-legends .sili-legend-profile h3 {
  font-size: .94rem;
}
.page-shoutout .sili-community-legends .sili-legend-profile p {
  font-size: .72rem;
  line-height: 1.42;
}

/* High-end holographic sweep now passes over the portrait itself. */
.page-shoutout .sili-legend-profile::after {
  z-index: 20;
  inset: -12%;
  width: 44%;
  height: 124%;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transform: translateX(-180%) skewX(-16deg);
  background:
    linear-gradient(
      105deg,
      transparent 0 18%,
      rgba(84,244,226,.06) 28%,
      rgba(255,255,255,.46) 44%,
      rgba(255,218,123,.3) 53%,
      rgba(156,124,255,.14) 64%,
      transparent 80%
    );
  background-size: 100% 100%;
  filter: blur(.5px);
  mix-blend-mode: screen;
  box-shadow: 0 0 28px rgba(84,244,226,.1);
  will-change: transform, opacity;
  pointer-events: none;
}
.page-shoutout .sili-legend-profile:hover::after {
  opacity: 1;
  animation: siliPortraitLuxeSweep 1.45s cubic-bezier(.18,.72,.16,1) forwards;
}
.page-shoutout .sili-legend-profile img {
  position: relative;
  z-index: 2;
}
.page-shoutout .sili-legend-profile:hover img {
  filter: saturate(1.11) contrast(1.04) brightness(1.055);
  box-shadow:
    0 0 0 5px rgba(84,244,226,.07),
    0 24px 62px rgba(0,0,0,.38),
    0 0 45px rgba(84,244,226,.2) !important;
}

/* A second quiet ring makes the portraits feel like premium emblems. */
.page-shoutout .sili-legend-profile > div:first-child {
  position: relative;
}
.page-shoutout .sili-legend-profile > div:first-child::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 2px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow:
    inset 0 0 28px rgba(84,244,226,.08),
    0 0 22px rgba(255,211,107,.06);
  opacity: .55;
  pointer-events: none;
  transition: opacity .45s ease, box-shadow .45s ease;
}
.page-shoutout .sili-legend-profile:hover > div:first-child::after {
  opacity: 1;
  box-shadow:
    inset 0 0 34px rgba(84,244,226,.15),
    0 0 32px rgba(255,211,107,.14);
}

@keyframes siliPortraitLuxeSweep {
  0% {
    opacity: 0;
    transform: translateX(-180%) skewX(-16deg);
  }
  16% { opacity: .95; }
  82% { opacity: .82; }
  100% {
    opacity: 0;
    transform: translateX(390%) skewX(-16deg);
  }
}

@media (max-width: 1100px) {
  .page-shoutout .sili-community-legends > div > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem;
  }
}
@media (max-width: 620px) {
  .page-shoutout .sili-community-legends {
    padding-block: 2.2rem;
  }
  .page-shoutout .sili-community-legends > div > .grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .page-shoutout .sili-community-legends .sili-legend-profile {
    max-width: 20rem;
    margin-inline: auto;
  }
  .page-shoutout .sili-community-legends .sili-legend-profile > div:first-child,
  .page-shoutout .sili-community-legends .sili-legend-profile > div:last-child {
    max-width: 18rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-shoutout .sili-legend-profile:hover::after {
    animation: none !important;
    opacity: .18;
    transform: translateX(145%) skewX(-16deg);
  }
}


/* =========================================================
   GLASS PORTAL — CINEMATIC TRANSITION
   Crack, shard burst, portrait pull and light-tunnel exit
   ========================================================= */
.sili-portal-link {
  cursor: pointer;
  touch-action: manipulation;
}
body.sili-portal-active {
  overflow: hidden !important;
}
.sili-portal-demo-pill {
  position: fixed;
  z-index: 9998;
  right: 1rem;
  bottom: 8.5rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem .85rem;
  border: 1px solid rgba(84,244,226,.42);
  border-radius: 999px;
  color: #eafffc;
  background: rgba(2,9,19,.92);
  box-shadow: 0 12px 36px rgba(0,0,0,.42), 0 0 24px rgba(84,244,226,.12);
  backdrop-filter: blur(16px);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .12em;
  pointer-events: none;
}
.sili-portal-demo-pill span {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #54f4e2;
  box-shadow: 0 0 14px #54f4e2;
  animation: siliPortalDemoPulse 1.8s ease-in-out infinite;
}

.sili-glass-portal {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  opacity: 1;
  isolation: isolate;
  perspective: 1200px;
  pointer-events: all;
  transition: opacity .22s ease;
}
.sili-glass-portal.is-closing {
  opacity: 0;
}
.sili-glass-portal::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(255,255,255,.19), transparent 12rem),
    radial-gradient(circle at 50% 50%, rgba(84,244,226,.2), rgba(4,12,25,.91) 43%, rgba(1,3,10,.98) 78%);
  backdrop-filter: blur(2px) saturate(1.25);
  animation: siliPortalBackdrop var(--portal-duration) cubic-bezier(.2,.75,.16,1) forwards;
}
.sili-glass-portal::after {
  content: "";
  position: absolute;
  z-index: 18;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(255,255,255,.16) 18%, transparent 20%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(84,244,226,.07) 35px, transparent 37px);
  mix-blend-mode: screen;
  animation: siliPortalShockwave var(--portal-duration) ease-out forwards;
  pointer-events: none;
}
.sili-portal-void {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(74vmin, 52rem);
  aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.05);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, #000 0 8%, rgba(1,8,18,.98) 16%, rgba(22,73,87,.82) 31%, rgba(255,190,56,.42) 43%, rgba(84,244,226,.17) 55%, transparent 72%);
  box-shadow:
    0 0 80px rgba(84,244,226,.36),
    0 0 180px rgba(255,181,44,.23),
    inset 0 0 110px rgba(0,0,0,.95);
  animation: siliPortalVoid var(--portal-duration) cubic-bezier(.18,.8,.14,1) forwards;
}
.sili-portal-speedlines {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%,-50%) scale(.25);
  opacity: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      transparent 0deg 4deg,
      rgba(255,220,139,.2) 4.4deg 4.8deg,
      transparent 5.2deg 9deg,
      rgba(84,244,226,.16) 9.3deg 9.65deg
    );
  mask-image: radial-gradient(circle, transparent 0 7%, #000 19%, transparent 70%);
  animation: siliPortalSpeedlines var(--portal-duration) cubic-bezier(.2,.72,.15,1) forwards;
}
.sili-portal-ring {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.sili-portal-ring-a {
  width: min(62vmin, 42rem);
  border: 2px solid rgba(255,215,119,.52);
  box-shadow: 0 0 34px rgba(255,187,48,.24), inset 0 0 34px rgba(84,244,226,.13);
  animation: siliPortalRingA var(--portal-duration) cubic-bezier(.18,.75,.15,1) forwards;
}
.sili-portal-ring-b {
  width: min(47vmin, 32rem);
  border: 1px dashed rgba(84,244,226,.64);
  box-shadow: 0 0 28px rgba(84,244,226,.28);
  animation: siliPortalRingB var(--portal-duration) cubic-bezier(.18,.75,.15,1) forwards;
}
.sili-portal-flash {
  position: absolute;
  z-index: 30;
  left: var(--impact-x);
  top: var(--impact-y);
  width: 2rem;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.05);
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow:
    0 0 22px #fff,
    0 0 55px #ffd36b,
    0 0 110px #54f4e2;
  animation: siliPortalFlash var(--portal-flash-duration) cubic-bezier(.15,.75,.12,1) forwards;
}
.sili-glass-cracks {
  position: absolute;
  z-index: 32;
  left: var(--impact-x);
  top: var(--impact-y);
  width: min(82vmin, 49rem);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
  overflow: visible;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(84,244,226,.55));
  pointer-events: none;
}
.sili-glass-cracks path {
  fill: none;
  stroke: rgba(240,255,255,.94);
  stroke-width: .72;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  opacity: 0;
  animation:
    siliGlassCrackDraw var(--portal-crack-duration) cubic-bezier(.15,.82,.12,1) var(--crack-delay) forwards,
    siliGlassCrackFade var(--portal-crack-fade-duration) ease var(--portal-crack-fade-delay) forwards;
}
.sili-portal-portrait {
  position: fixed;
  z-index: 15;
  left: var(--portrait-left);
  top: var(--portrait-top);
  width: var(--portrait-width);
  height: var(--portrait-height);
  overflow: hidden;
  border: 2px solid rgba(255,230,170,.92);
  border-radius: 50%;
  background: #06101c;
  box-shadow:
    0 0 0 8px rgba(255,211,107,.06),
    0 0 55px rgba(84,244,226,.34),
    0 22px 70px rgba(0,0,0,.6);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  animation: siliPortalPortraitDive var(--portal-duration) cubic-bezier(.17,.74,.11,1) forwards;
}
.sili-portal-portrait img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.sili-portal-name {
  position: absolute;
  z-index: 38;
  left: 50%;
  bottom: clamp(2.2rem, 7vh, 5rem);
  transform: translateX(-50%) translateY(1.5rem);
  opacity: 0;
  min-width: min(86vw, 22rem);
  text-align: center;
  text-shadow: 0 3px 14px #000, 0 0 22px rgba(84,244,226,.45);
  animation: siliPortalName var(--portal-duration) cubic-bezier(.2,.75,.15,1) forwards;
}
.sili-portal-name span {
  display: block;
  color: rgba(169,255,244,.8);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .34em;
}
.sili-portal-name strong {
  display: block;
  margin-top: .4rem;
  color: #fff7df;
  font-size: clamp(1.4rem, 4vw, 3.4rem);
  font-weight: 1000;
  letter-spacing: -.025em;
  line-height: .95;
  text-transform: uppercase;
}
.sili-glass-shard {
  position: fixed;
  z-index: 35;
  left: var(--impact-x);
  top: var(--impact-y);
  width: var(--shard-width);
  height: var(--shard-height);
  opacity: 0;
  border: 1px solid rgba(229,255,255,.66);
  background:
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(84,244,226,.14) 46%, rgba(156,124,255,.09) 72%, rgba(255,211,107,.22));
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.22),
    0 0 12px rgba(84,244,226,.14);
  backdrop-filter: blur(2px);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  animation: siliGlassShardBreak var(--portal-duration) cubic-bezier(.16,.68,.13,1) var(--shard-delay) forwards;
}

@keyframes siliPortalDemoPulse {
  50% { opacity: .45; transform: scale(.72); }
}
@keyframes siliPortalBackdrop {
  0%, 8% { opacity: 0; }
  38% { opacity: .58; }
  100% { opacity: 1; }
}
@keyframes siliPortalShockwave {
  0%, 28% { opacity: 0; transform: scale(.25); }
  50% { opacity: .75; }
  100% { opacity: 0; transform: scale(2.1); }
}
@keyframes siliPortalVoid {
  0%, 18% { opacity: 0; transform: translate(-50%,-50%) scale(.05) rotate(0); }
  43% { opacity: 1; transform: translate(-50%,-50%) scale(.72) rotate(18deg); }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(4.6) rotate(96deg); }
}
@keyframes siliPortalSpeedlines {
  0%, 22% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
  48% { opacity: .38; }
  100% { opacity: .72; transform: translate(-50%,-50%) scale(1.5) rotate(68deg); }
}
@keyframes siliPortalRingA {
  0%, 20% { opacity: 0; transform: translate(-50%,-50%) scale(.14) rotate(0); }
  47% { opacity: .92; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(3.4) rotate(95deg); }
}
@keyframes siliPortalRingB {
  0%, 25% { opacity: 0; transform: translate(-50%,-50%) scale(.08) rotate(0); }
  50% { opacity: .88; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(4.1) rotate(-130deg); }
}
@keyframes siliPortalFlash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.05); }
  18% { opacity: 1; }
  62% { opacity: .9; transform: translate(-50%,-50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(8); }
}
@keyframes siliGlassCrackDraw {
  0% { opacity: 0; stroke-dashoffset: 250; }
  12% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes siliGlassCrackFade {
  to { opacity: 0; filter: blur(1px); }
}
@keyframes siliPortalPortraitDive {
  0%, 16% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: saturate(1) brightness(1);
  }
  36% {
    transform: translate3d(0,0,55px) scale(1.04);
    filter: saturate(1.18) brightness(1.08);
  }
  66% {
    opacity: 1;
    transform: translate3d(var(--portal-move-x),var(--portal-move-y),120px) scale(1.55);
    filter: saturate(1.35) brightness(1.13);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--portal-move-x),var(--portal-move-y),280px) scale(9.5);
    filter: saturate(1.6) brightness(1.45) blur(2px);
  }
}
@keyframes siliPortalName {
  0%, 30% { opacity: 0; transform: translateX(-50%) translateY(1.5rem) scale(.96); }
  49% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-.6rem) scale(1.06); }
}
@keyframes siliGlassShardBreak {
  0%, 9% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) rotate(0) scale(.08);
  }
  22% { opacity: .92; }
  47% {
    opacity: .88;
    transform:
      translate3d(
        calc(-50% + var(--burst-x)),
        calc(-50% + var(--burst-y)),
        120px
      )
      rotate(var(--shard-rot))
      scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(-50% + var(--suck-x)),
        calc(-50% + var(--suck-y)),
        300px
      )
      rotate(var(--shard-rot-end))
      scale(.02);
  }
}

@media (max-width: 620px) {
  .sili-portal-demo-pill {
    right: .65rem;
    bottom: 7.6rem;
    max-width: calc(100vw - 1.3rem);
    font-size: .5rem;
  }
  .sili-glass-cracks {
    width: 100vmin;
  }
  .sili-portal-name {
    bottom: 2rem;
  }
  .sili-glass-shard {
    backdrop-filter: blur(1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sili-portal-demo-pill span {
    animation: none !important;
  }
  .sili-glass-portal {
    display: none !important;
  }
}


/* =========================================================
   GLASS PORTAL — REFINED PACING & PRISMATIC NAMEPLATE
   Balanced 1.5s transition with a clearer cinematic focus
   ========================================================= */
.sili-glass-portal::before {
  background:
    radial-gradient(circle at var(--impact-x) var(--impact-y), rgba(255,255,255,.24), transparent 10rem),
    radial-gradient(circle at 50% 50%, rgba(84,244,226,.24), rgba(4,12,25,.92) 42%, rgba(1,3,10,.99) 80%);
  backdrop-filter: blur(3px) saturate(1.32) contrast(1.05);
}
.sili-portal-void {
  background:
    radial-gradient(circle at 50% 50%, #000 0 7%, rgba(1,7,17,.99) 15%, rgba(13,61,78,.9) 29%, rgba(255,190,56,.5) 42%, rgba(84,244,226,.22) 56%, transparent 73%);
  box-shadow:
    0 0 90px rgba(84,244,226,.42),
    0 0 210px rgba(255,181,44,.27),
    inset 0 0 130px rgba(0,0,0,.98);
}
.sili-portal-ring-a {
  border-color: rgba(255,221,139,.72);
  box-shadow:
    0 0 44px rgba(255,187,48,.32),
    0 0 90px rgba(84,244,226,.12),
    inset 0 0 40px rgba(84,244,226,.18);
}
.sili-portal-ring-b {
  border-color: rgba(101,255,236,.78);
  box-shadow:
    0 0 36px rgba(84,244,226,.34),
    inset 0 0 22px rgba(255,210,101,.1);
}
.sili-portal-core {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  width: min(18vmin, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.04);
  background:
    radial-gradient(circle, #fff 0 5%, #fff1b5 10%, #52f5df 25%, rgba(39,112,138,.72) 42%, rgba(2,5,13,.94) 68%);
  box-shadow:
    0 0 24px rgba(255,255,255,.9),
    0 0 72px rgba(84,244,226,.72),
    0 0 140px rgba(255,193,73,.48);
  mix-blend-mode: screen;
  animation: siliPortalCore var(--portal-duration) cubic-bezier(.18,.76,.08,1) forwards;
}
.sili-portal-prism {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(32vmin, 17rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg) scale(.06);
  border: 1px solid rgba(255,224,150,.72);
  box-shadow:
    inset 0 0 24px rgba(84,244,226,.16),
    0 0 34px rgba(255,197,74,.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 32% 68%, rgba(84,244,226,.11));
  animation: siliPortalPrism var(--portal-duration) cubic-bezier(.18,.78,.1,1) forwards;
}
.sili-portal-prism::before,
.sili-portal-prism::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(84,244,226,.4);
}
.sili-portal-prism::after {
  inset: 34%;
  border-color: rgba(255,220,133,.48);
}
.sili-portal-portrait {
  border-color: rgba(255,236,190,.98);
  box-shadow:
    0 0 0 7px rgba(255,211,107,.07),
    0 0 0 12px rgba(84,244,226,.035),
    0 0 68px rgba(84,244,226,.42),
    0 24px 80px rgba(0,0,0,.68);
}
.sili-portal-name {
  z-index: 70;
  bottom: clamp(2.5rem, 7.5vh, 5.8rem);
  width: min(88vw, 32rem);
  min-width: 0;
  padding: .78rem 2rem 1rem;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,220,139,.7);
  border-radius: .9rem;
  background:
    linear-gradient(110deg, rgba(84,244,226,.12), transparent 34%, rgba(255,198,76,.14)),
    rgba(2,8,18,.82);
  box-shadow:
    0 18px 55px rgba(0,0,0,.58),
    0 0 34px rgba(84,244,226,.18),
    inset 0 0 26px rgba(255,211,107,.08);
  backdrop-filter: blur(18px) saturate(1.35);
  text-shadow: none;
  animation: siliPortalNameRefined var(--portal-duration) cubic-bezier(.2,.75,.12,1) forwards;
}
.sili-portal-name::before,
.sili-portal-name::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  width: clamp(1.2rem, 7vw, 4rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(84,244,226,.9));
  box-shadow: 0 0 12px rgba(84,244,226,.65);
}
.sili-portal-name::before {
  left: .75rem;
}
.sili-portal-name::after {
  right: .75rem;
  transform: scaleX(-1);
}
.sili-portal-name span,
.sili-portal-name strong {
  position: relative;
  z-index: 3;
}
.sili-portal-name span {
  color: #91fff0;
  font-size: .58rem;
  letter-spacing: .3em;
  text-shadow: 0 0 16px rgba(84,244,226,.55);
}
.sili-portal-name strong {
  margin-top: .45rem;
  color: #fff8e8;
  font-size: clamp(1.65rem, 4.4vw, 3.7rem);
  letter-spacing: -.018em;
  text-shadow:
    0 3px 18px rgba(0,0,0,.95),
    0 0 18px rgba(255,205,92,.38),
    0 0 34px rgba(84,244,226,.2);
}
.sili-portal-name em {
  position: absolute;
  z-index: 1;
  inset: -80% -35%;
  transform: translateX(-70%) skewX(-20deg);
  opacity: 0;
  background: linear-gradient(90deg, transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%);
  animation: siliPortalNameSheen var(--portal-duration) ease-out forwards;
  pointer-events: none;
}
.sili-glass-shard {
  border-color: rgba(235,255,255,.76);
  background:
    linear-gradient(145deg, rgba(255,255,255,.5), rgba(84,244,226,.17) 44%, rgba(161,126,255,.1) 70%, rgba(255,211,107,.26));
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.26),
    0 0 16px rgba(84,244,226,.2);
}
@keyframes siliPortalCore {
  0%, 28% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(.04);
    filter: blur(0);
  }
  44% {
    opacity: .98;
    transform: translate(-50%,-50%) scale(.55);
  }
  68% {
    opacity: .92;
    transform: translate(-50%,-50%) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) scale(9);
    filter: blur(3px);
  }
}
@keyframes siliPortalPrism {
  0%, 25% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(30deg) scale(.06);
  }
  48% {
    opacity: .88;
    transform: translate(-50%,-50%) rotate(78deg) scale(.62);
  }
  76% {
    opacity: .72;
    transform: translate(-50%,-50%) rotate(132deg) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%,-50%) rotate(230deg) scale(3.8);
  }
}
@keyframes siliPortalNameRefined {
  0%, 29% {
    opacity: 0;
    transform: translateX(-50%) translateY(1.4rem) scale(.95);
    filter: blur(4px);
  }
  43% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
  84% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-.55rem) scale(1.035);
    filter: blur(1px);
  }
}
@keyframes siliPortalNameSheen {
  0%, 43% { opacity: 0; transform: translateX(-70%) skewX(-20deg); }
  50% { opacity: .9; }
  68% { opacity: .2; transform: translateX(70%) skewX(-20deg); }
  100% { opacity: 0; transform: translateX(70%) skewX(-20deg); }
}
@media (max-width: 620px) {
  .sili-portal-name {
    bottom: 1.6rem;
    width: min(91vw, 27rem);
    padding: .68rem 1.25rem .82rem;
  }
  .sili-portal-name::before,
  .sili-portal-name::after {
    width: 1.2rem;
  }
  .sili-portal-core {
    width: 22vmin;
  }
  .sili-portal-prism {
    width: 40vmin;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sili-portal-core,
  .sili-portal-prism,
  .sili-portal-name em {
    animation: none !important;
  }
}


/* =========================================================
   GLASS PORTAL — LOCAL FRAME SHATTER
   The selected profile frame breaks before the portal expands
   ========================================================= */
.sili-portal-origin-hidden {
  opacity: 0 !important;
  transition: none !important;
}
.sili-portal-frame-clone {
  position: fixed !important;
  z-index: 42 !important;
  left: var(--target-left) !important;
  top: var(--target-top) !important;
  width: var(--target-width) !important;
  height: var(--target-height) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  pointer-events: none !important;
  transform-origin: 50% 50% !important;
  will-change: transform, opacity, filter, clip-path;
  animation: siliPortalFrameShatter var(--portal-duration) cubic-bezier(.2,.74,.1,1) forwards !important;
}
.sili-glass-cracks {
  z-index: 55;
  left: calc(var(--target-left) - 5px);
  top: calc(var(--target-top) - 5px);
  width: calc(var(--target-width) + 10px);
  height: calc(var(--target-height) + 10px);
  aspect-ratio: auto;
  transform: none;
  overflow: hidden;
  border-radius: 1rem;
}
.sili-glass-cracks path {
  stroke-width: 1.05;
}
.sili-glass-shard {
  left: var(--shard-start-x);
  top: var(--shard-start-y);
  animation: siliGlassShardFromFrame var(--portal-duration) cubic-bezier(.16,.7,.1,1) var(--shard-delay) forwards;
}
.sili-glass-portal::before {
  opacity: 0;
  background:
    radial-gradient(circle at var(--target-center-x) var(--target-center-y), rgba(84,244,226,.24), transparent 15rem),
    radial-gradient(circle at 50% 50%, rgba(84,244,226,.2), rgba(4,12,25,.93) 43%, rgba(1,3,10,.99) 81%);
  animation: siliPortalBackdropFromFrame var(--portal-duration) cubic-bezier(.2,.75,.12,1) forwards;
}
.sili-glass-portal::after {
  transform-origin: var(--target-center-x) var(--target-center-y);
  animation: siliPortalShockwaveFromFrame var(--portal-duration) ease-out forwards;
}
.sili-portal-void,
.sili-portal-speedlines,
.sili-portal-ring,
.sili-portal-core,
.sili-portal-prism {
  left: var(--target-center-x);
  top: var(--target-center-y);
}
.sili-portal-void {
  animation: siliPortalVoidFromFrame var(--portal-duration) cubic-bezier(.18,.8,.1,1) forwards;
}
.sili-portal-speedlines {
  animation: siliPortalSpeedlinesFromFrame var(--portal-duration) cubic-bezier(.2,.72,.12,1) forwards;
}
.sili-portal-ring-a {
  animation: siliPortalRingAFromFrame var(--portal-duration) cubic-bezier(.18,.76,.12,1) forwards;
}
.sili-portal-ring-b {
  animation: siliPortalRingBFromFrame var(--portal-duration) cubic-bezier(.18,.76,.12,1) forwards;
}
.sili-portal-core {
  animation: siliPortalCoreFromFrame var(--portal-duration) cubic-bezier(.18,.76,.08,1) forwards;
}
.sili-portal-prism {
  animation: siliPortalPrismFromFrame var(--portal-duration) cubic-bezier(.18,.78,.1,1) forwards;
}
.sili-portal-name {
  animation: siliPortalNameAfterShatter var(--portal-duration) cubic-bezier(.2,.75,.12,1) forwards;
}
@keyframes siliPortalFrameShatter {
  0%, 9% {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    filter: brightness(1) saturate(1);
    clip-path: inset(0 0 0 0);
  }
  14% { transform: translate3d(-2px,1px,0) rotate(-.2deg) scale(1.002); }
  18% { transform: translate3d(3px,-2px,0) rotate(.25deg) scale(1.006); }
  22% { transform: translate3d(-3px,2px,0) rotate(-.28deg) scale(1.01); }
  28% {
    opacity: 1;
    transform: translate3d(1px,-1px,35px) scale(1.025);
    filter: brightness(1.24) saturate(1.18);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  43% {
    opacity: .82;
    transform: translate3d(0,0,80px) scale(1.055);
    filter: brightness(1.38) saturate(1.3);
    clip-path: polygon(0 0, 48% 0, 52% 10%, 100% 0, 100% 46%, 90% 52%, 100% 100%, 53% 100%, 48% 91%, 0 100%, 0 54%, 10% 48%);
  }
  57%, 100% {
    opacity: 0;
    transform: translate3d(0,0,150px) scale(.9);
    filter: brightness(1.7) saturate(1.45) blur(2px);
    clip-path: polygon(7% 8%, 42% 3%, 47% 31%, 89% 5%, 96% 42%, 67% 48%, 94% 91%, 55% 96%, 48% 66%, 9% 94%, 4% 58%, 34% 49%);
  }
}
@keyframes siliPortalBackdropFromFrame {
  0%, 34% { opacity: 0; }
  52% { opacity: .76; }
  100% { opacity: 1; }
}
@keyframes siliPortalShockwaveFromFrame {
  0%, 42% { opacity: 0; transform: scale(.16); }
  61% { opacity: .72; }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes siliPortalVoidFromFrame {
  0%, 34% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale(.035) rotate(0);
  }
  48% {
    opacity: 1;
    transform: translate3d(-50%,-50%,0) scale(.35) rotate(12deg);
  }
  68% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(1.05) rotate(38deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(4.8) rotate(108deg);
  }
}
@keyframes siliPortalSpeedlinesFromFrame {
  0%, 43% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale(.1) rotate(0);
  }
  65% {
    opacity: .4;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(.55) rotate(28deg);
  }
  100% {
    opacity: .76;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(1.55) rotate(78deg);
  }
}
@keyframes siliPortalRingAFromFrame {
  0%, 39% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale(.08) rotate(0);
  }
  56% { opacity: .94; }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(3.5) rotate(105deg);
  }
}
@keyframes siliPortalRingBFromFrame {
  0%, 42% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale(.05) rotate(0);
  }
  60% { opacity: .9; }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(4.2) rotate(-145deg);
  }
}
@keyframes siliPortalCoreFromFrame {
  0%, 39% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) scale(.03);
    filter: blur(0);
  }
  53% {
    opacity: .98;
    transform: translate3d(-50%,-50%,0) scale(.42);
  }
  72% {
    opacity: .9;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) scale(9);
    filter: blur(3px);
  }
}
@keyframes siliPortalPrismFromFrame {
  0%, 40% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) rotate(25deg) scale(.04);
  }
  57% {
    opacity: .88;
    transform: translate3d(-50%,-50%,0) rotate(76deg) scale(.52);
  }
  76% {
    opacity: .7;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) rotate(140deg) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--portal-shift-x)),calc(-50% + var(--portal-shift-y)),0) rotate(240deg) scale(3.9);
  }
}
@keyframes siliPortalNameAfterShatter {
  0%, 48% {
    opacity: 0;
    transform: translateX(-50%) translateY(1.2rem) scale(.96);
    filter: blur(4px);
  }
  61% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
  87% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-.45rem) scale(1.035);
    filter: blur(1px);
  }
}
@keyframes siliGlassShardFromFrame {
  0%, 14% {
    opacity: 0;
    transform: translate3d(-50%,-50%,0) rotate(0) scale(.25);
  }
  24% { opacity: .96; }
  44% {
    opacity: .92;
    transform: translate3d(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y)),105px) rotate(var(--shard-rot)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--suck-x)),calc(-50% + var(--suck-y)),320px) rotate(var(--shard-rot-end)) scale(.025);
  }
}
@media (max-width: 620px) {
  .sili-glass-cracks {
    width: calc(var(--target-width) + 8px);
    height: calc(var(--target-height) + 8px);
    left: calc(var(--target-left) - 4px);
    top: calc(var(--target-top) - 4px);
  }
}