@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Cormorant+Garamond:wght@500;600;700&display=swap');

:root {
  --bg-0: #04030b;
  --bg-1: #0b0820;
  --bg-2: #140d32;
  --bg-3: #1b1246;
  --ink: #f7f2ff;
  --muted: #b9b3d8;
  --soft: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.2);
  --violet: #8a5cff;
  --cyan: #6df7ff;
  --pink: #ff4fd8;
  --gold: #ffcf6d;
  --shadow: 0 30px 80px rgba(0,0,0,.42);
  --glow-violet: 0 0 40px rgba(138,92,255,.35);
  --glow-cyan: 0 0 40px rgba(109,247,255,.18);
  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,79,216,.14), transparent 22%),
    radial-gradient(circle at 85% 16%, rgba(109,247,255,.12), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(138,92,255,.11), transparent 35%),
    linear-gradient(160deg, var(--bg-0), var(--bg-1) 35%, var(--bg-2) 72%, #030208 100%);
  scroll-behavior: smooth;
}
body {
  font: 400 15px/1.85 'Space Grotesk', system-ui, sans-serif;
  color: var(--ink);
  overflow-x: clip;
  position: relative;
  background: transparent;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
}
body::before {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at center, black 32%, transparent 82%);
  opacity: .45;
  animation: driftGrid 18s linear infinite;
}
body::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 60%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 2px, transparent 2px 12px);
  mix-blend-mode: screen;
  opacity: .28;
  animation: pulseField 12s ease-in-out infinite;
}

.page-wrapper {
  width: min(calc(100% - 36px), var(--max));
  margin: 0 auto;
  padding: 24px 0 140px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  position: relative;
}

.page-wrapper::before,
.page-wrapper::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.page-wrapper::before {
  width: 560px;
  height: 560px;
  border-radius: 50%;
  left: -140px;
  top: 80px;
  background: radial-gradient(circle, rgba(255,79,216,.18), transparent 60%);
  filter: blur(25px);
  animation: floatBlob 14s ease-in-out infinite;
}
.page-wrapper::after {
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -160px;
  top: 380px;
  background: radial-gradient(circle, rgba(109,247,255,.16), transparent 60%);
  filter: blur(28px);
  animation: floatBlob 17s ease-in-out infinite reverse;
}

.intro,
.main.supporting {
  min-width: 0;
}

.intro {
  grid-column: 1;
  position: relative;
}

header {
  min-height: 82vh;
  padding: 40px clamp(18px, 4vw, 44px) 32px;
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    radial-gradient(circle at top left, rgba(255,79,216,.1), transparent 30%),
    radial-gradient(circle at bottom right, rgba(109,247,255,.12), transparent 34%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.14);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
header::before,
header::after {
  content: '';
  position: absolute;
  inset: auto;
  pointer-events: none;
}
header::before {
  width: 150%;
  height: 2px;
  left: -20%;
  top: 18%;
  background: linear-gradient(90deg, transparent, rgba(109,247,255,.8), transparent);
  box-shadow: 0 0 24px rgba(109,247,255,.75);
  transform: rotate(-8deg);
  animation: scanner 9s linear infinite;
}
header::after {
  width: 420px;
  height: 420px;
  right: -70px;
  bottom: -70px;
  border-radius: 50%;
  background: conic-gradient(from 120deg, rgba(255,79,216,.35), rgba(109,247,255,.1), rgba(138,92,255,.3), rgba(255,79,216,.35));
  filter: blur(44px);
  opacity: .8;
  animation: rotateHalo 22s linear infinite;
}

header h1,
header h2,
.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements,
footer,
.sidebar .wrapper > div {
  position: relative;
  z-index: 1;
}

header h1 {
  margin: 0;
  max-width: 8ch;
  font: 700 clamp(3.8rem, 12vw, 8.8rem)/.88 'Space Grotesk', sans-serif;
  letter-spacing: -.08em;
  text-transform: uppercase;
  color: transparent;
  background:
    linear-gradient(180deg, #fff 0%, #f6d9ff 20%, #86f4ff 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 40px rgba(255,255,255,.08);
  filter: drop-shadow(0 0 24px rgba(109,247,255,.14));
}
header h1::after {
  content: 'CSS Zen Garden';
  position: absolute;
  left: .03em;
  top: .03em;
  z-index: -1;
  color: rgba(255,79,216,.12);
  filter: blur(8px);
}

header h2 {
  margin: 14px 0 0;
  max-width: 18ch;
  font: 600 clamp(1.1rem, 2.5vw, 1.65rem)/1.15 'Cormorant Garamond', serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
header h2 abbr,
.summary abbr,
.preamble abbr,
.explanation abbr,
.participation abbr,
.benefits abbr,
.requirements abbr,
.sidebar abbr {
  text-decoration: none;
  border: 0;
  color: var(--cyan);
}

.summary {
  margin: 24px 0 0;
  width: min(440px, 100%);
  padding: 22px 24px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,5,15,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--glow-cyan);
  backdrop-filter: blur(8px);
}
.summary p {
  margin: 0;
  text-align: left;
  color: var(--ink);
}
.summary p + p {
  margin-top: 12px;
  color: var(--muted);
}

.preamble,
.explanation,
.participation,
.benefits,
.requirements {
  margin-top: 26px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 28px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(180deg, rgba(138,92,255,.08), transparent 60%);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
  transition: transform .45s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.preamble:hover,
.explanation:hover,
.participation:hover,
.benefits:hover,
.requirements:hover {
  transform: perspective(1200px) rotateX(3deg) rotateY(-3deg) translateY(-4px);
  border-color: rgba(109,247,255,.34);
  box-shadow: var(--shadow), var(--glow-violet), inset 0 1px 0 rgba(255,255,255,.12);
}
.preamble::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08) 34%, transparent 48%),
    radial-gradient(circle at top right, rgba(255,79,216,.14), transparent 34%);
  opacity: .9;
  pointer-events: none;
}
.preamble::after,
.explanation::after,
.participation::after,
.benefits::after,
.requirements::after {
  content: '';
  position: absolute;
  inset: auto 20px 14px auto;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(109,247,255,.8), transparent);
  box-shadow: 0 0 16px rgba(109,247,255,.6);
}

.main.supporting {
  grid-column: 1;
  position: relative;
}

h3 {
  margin: 0 0 16px;
  font: 600 clamp(1.4rem, 3vw, 2.2rem)/.96 'Cormorant Garamond', serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
h3::before {
  content: '◈';
  display: inline-block;
  margin-right: 12px;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(255,207,109,.45);
  transform: translateY(-1px);
}

p {
  margin: 0;
  color: var(--muted);
  text-align: left;
  max-width: 72ch;
}
p + p { margin-top: 14px; }

.explanation p:first-of-type,
.participation p:first-of-type,
.requirements p:first-of-type,
.preamble p:first-of-type {
  font-size: 1.02rem;
  color: #efeaff;
}

.requirements p[role='contentinfo'] {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .95rem;
}

.sidebar {
  grid-column: 2;
  position: sticky;
  top: 18px;
  align-self: start;
  margin: 0;
  width: auto;
}
.sidebar .wrapper {
  border-radius: 32px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(7,8,20,.82), rgba(15,10,36,.78)),
    radial-gradient(circle at top center, rgba(109,247,255,.08), transparent 30%);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.sidebar .wrapper::before {
  content: 'ORACLE PANEL';
  display: block;
  margin: -4px 0 18px;
  font-size: .7rem;
  letter-spacing: .35em;
  color: rgba(255,255,255,.42);
}
.sidebar .wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 18%);
  pointer-events: none;
}

.sidebar h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  letter-spacing: .22em;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cyan);
}
.sidebar h3::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(109,247,255,.8);
}

.sidebar nav,
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar .wrapper > div + div {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar li {
  display: block;
  margin: 0;
  padding: 12px 0;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: none;
}
.sidebar li:last-child { border-bottom: 0; }
.sidebar li a { display: inline; }
.sidebar .design-name,
.sidebar .designer-name,
.sidebar .design-archives a,
.sidebar .zen-resources a {
  position: relative;
}
.sidebar .design-name {
  display: inline-block;
  font-weight: 700;
  color: #fff;
}
.sidebar .designer-name,
.sidebar .design-archives a,
.sidebar .zen-resources a {
  color: var(--muted);
}
.sidebar li:hover .design-name,
.sidebar li:hover .designer-name,
.sidebar li:hover a {
  color: var(--cyan);
}

footer {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}
footer a {
  min-width: 46px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  text-align: center;
}
footer a:hover {
  color: #06050d;
  background: var(--cyan);
  border-color: transparent;
  box-shadow: 0 0 22px rgba(109,247,255,.45);
}

a {
  color: #fff;
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease, background-size .25s ease, border-color .25s ease;
}
a:hover,
a:focus,
a:active {
  color: var(--cyan);
  text-shadow: 0 0 20px rgba(109,247,255,.28);
}
a:visited { color: #dbc7ff; }

.summary a,
.preamble a,
.explanation a,
.participation a,
.benefits a,
.requirements a {
  background-image: linear-gradient(90deg, var(--pink), var(--cyan));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
}
.summary a:hover,
.preamble a:hover,
.explanation a:hover,
.participation a:hover,
.benefits a:hover,
.requirements a:hover {
  background-size: 100% 100%;
  color: #04030b;
  text-shadow: none;
}

.extra1,
.extra2,
.extra3,
.extra4,
.extra5,
.extra6 {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(6px);
  opacity: .75;
  z-index: -2;
}
.extra1 {
  width: 10px; height: 10px; left: 7%; top: 18%;
  background: var(--cyan);
  box-shadow: 0 0 24px 8px rgba(109,247,255,.35);
  animation: particle1 11s ease-in-out infinite;
}
.extra2 {
  width: 12px; height: 12px; right: 12%; top: 28%;
  background: var(--pink);
  box-shadow: 0 0 24px 8px rgba(255,79,216,.32);
  animation: particle2 13s ease-in-out infinite;
}
.extra3 {
  width: 7px; height: 7px; left: 18%; bottom: 18%;
  background: var(--gold);
  box-shadow: 0 0 24px 8px rgba(255,207,109,.24);
  animation: particle3 15s ease-in-out infinite;
}
.extra4 {
  width: 130px; height: 130px; right: 28%; bottom: 7%;
  border: 1px solid rgba(109,247,255,.16);
  box-shadow: inset 0 0 40px rgba(109,247,255,.06), 0 0 80px rgba(109,247,255,.08);
  animation: orbit 18s linear infinite;
}
.extra5 {
  width: 180px; height: 180px; left: -50px; bottom: 14%;
  border: 1px solid rgba(255,79,216,.14);
  box-shadow: inset 0 0 40px rgba(255,79,216,.06), 0 0 80px rgba(255,79,216,.06);
  animation: orbit 22s linear infinite reverse;
}
.extra6 {
  width: 2px; height: 40vh; right: 5.5%; top: 18%;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(109,247,255,.6), transparent);
  box-shadow: 0 0 30px rgba(109,247,255,.3);
  animation: beam 6s ease-in-out infinite;
}

@keyframes driftGrid {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(29px, 29px, 0); }
}
@keyframes pulseField {
  0%, 100% { transform: scale(1); opacity: .24; }
  50% { transform: scale(1.05); opacity: .34; }
}
@keyframes rotateHalo {
  to { transform: rotate(360deg); }
}
@keyframes scanner {
  0% { transform: translateX(-120%) rotate(-8deg); }
  100% { transform: translateX(120%) rotate(-8deg); }
}
@keyframes floatBlob {
  0%,100% { transform: translateY(0) translateX(0) scale(1); }
  50% { transform: translateY(-24px) translateX(18px) scale(1.06); }
}
@keyframes particle1 {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-26px) translateX(20px); }
}
@keyframes particle2 {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(18px) translateX(-14px); }
}
@keyframes particle3 {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(12px); }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes beam {
  0%,100% { opacity: .22; transform: scaleY(.88); }
  50% { opacity: .8; transform: scaleY(1.06); }
}

@media (max-width: 1120px) {
  .page-wrapper {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: relative;
    top: auto;
    grid-column: 1;
  }
  .sidebar .wrapper::before { content: 'NAVIGATION MATRIX'; }
}

@media (max-width: 820px) {
  body { font-size: 14px; }
  .page-wrapper { width: min(calc(100% - 22px), var(--max)); gap: 18px; padding-bottom: 90px; }
  header { min-height: auto; padding: 28px 20px; border-radius: 26px; }
  header h1 { font-size: clamp(3.2rem, 18vw, 5.3rem); }
  header h2 { letter-spacing: .1em; }
  .summary,
  .preamble,
  .explanation,
  .participation,
  .benefits,
  .requirements,
  .sidebar .wrapper,
  footer { border-radius: 22px; }
  .extra6 { display: none; }
}

@media (max-width: 560px) {
  .page-wrapper { width: min(calc(100% - 14px), var(--max)); }
  header h1 { max-width: 7ch; }
  h3 { font-size: 1.28rem; }
  .summary { padding: 18px; }
  .preamble,
  .explanation,
  .participation,
  .benefits,
  .requirements,
  .sidebar .wrapper { padding: 18px; }
  footer { gap: 8px; }
  footer a { flex: 1 1 calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}