:root{
  --living-portal-ink:#f2f9fd;
  --living-portal-muted:#b3c9d6;
  --living-portal-glass:#04101c;
  --living-portal-glass-light:#0b1c24;
  --living-portal-accent:#67dbf0;
  --living-portal-gold:#ffd566;
  --living-portal-line:#223243;
  --living-portal-shadow:0 18px 50px rgba(4,20,32,.7);
}
@keyframes livingPortalDrift{
  from{transform:rotate(3deg) scale(1);opacity:.82}
  to{transform:rotate(14deg) scale(1.22);opacity:1}
}
@keyframes glassTidePulse{
  from{opacity:.82}
  to{opacity:1}
}
.portal-card{
  position:relative;
  isolation:isolate;
  min-height:540px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(120deg,var(--living-portal-glass),var(--living-portal-glass-light) 50%,var(--living-portal-glass));
  color:var(--living-portal-ink);
  box-shadow:var(--living-portal-shadow);
}
.portal-card::before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    radial-gradient(circle at 24% 22%, rgba(103,219,240,.44), transparent 45%),
    radial-gradient(circle at 80% 28%, rgba(255,213,102,.38), transparent 48%),
    conic-gradient(from 180deg at 44% 55%, rgba(103,219,240,.24), transparent 40%);
  filter:blur(28px) saturate(130%);
  opacity:.9;
  z-index:0;
  animation:livingPortalDrift 32s ease-in-out infinite alternate;
}
.portal-card::after{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:20px;
  border:1px solid rgba(103,219,240,.42);
  background:linear-gradient(120deg, rgba(4,20,32,.78), rgba(4,20,32,.28) 55%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 18px 50px rgba(4,20,32,.8), inset 0 0 22px rgba(103,219,240,.2);
  z-index:1;
}
.portal-card .portal-copy{position:relative;z-index:2;padding:70px 52px}
.portal-card .portal-copy p{color:var(--living-portal-muted);max-width:680px}
.portal-card .portal-copy .eyebrow{color:var(--living-portal-accent);font-weight:850}
.portal-card .portal-copy h2{font-size:clamp(2rem,5vw,4rem);letter-spacing:-.045em;line-height:1.1;margin:12px 0 18px}
.glass-tide{
  --glass-tide-bg:#04101c;
  --glass-tide-fg:#f2f9fd;
  --glass-tide-accent:#67dbf0;
  --glass-tide-gold:#ffd566;
  --glass-tide-panel:#0b1c24;
  --glass-tide-glass:#04101c;
  --glass-tide-line:#223243;
  color:var(--glass-tide-fg);
}
.glass-tide .portal-card{min-height:520px;background:linear-gradient(120deg,var(--glass-tide-panel),var(--glass-tide-glass) 50%,var(--glass-tide-panel))}
.glass-tide .portal-card::before{background:radial-gradient(circle at 25% 25%, rgba(103,219,240,.42), transparent 48%),radial-gradient(circle at 78% 28%, rgba(255,213,102,.38), transparent 46%)}
.glass-tide .portal-card::after{background:linear-gradient(120deg, rgba(4,20,32,.78), rgba(4,20,32,.22) 50%, transparent)}
.hero.glass-tide{padding:36px 0 70px}
.hero .portal-card .portal-copy{padding:70px 64px}
.hero .portal-card::after{inset:18px;pointer-events:none}
.hero .portal-card .lead{max-width:650px}
.topbar>.container{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.card[data-category]:hover{border-color:var(--cyan);background:#1a3043}
.card[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
.builder-layout>.panel:last-child{align-self:start;position:sticky;top:20px}
@media(max-width:900px){.topbar>.container{flex-wrap:wrap}.builder-layout>.panel:last-child{position:static}.hero .portal-card .portal-copy{padding:56px 36px}}
@media(max-width:620px){.hero .portal-card .portal-copy{padding:42px 24px}.hero.glass-tide{padding:20px 0 40px}.hero h1{overflow-wrap:break-word}}
@media(max-width:900px){
  .portal-card .portal-copy{padding:56px 36px}
}
@media(max-width:620px){
  .portal-card{min-height:470px}
  .portal-card .portal-copy{padding:42px 24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portal-card::before,.portal-card::after{animation:none!important;transition:none!important}
}