:root{
  --bg:#050509;
  --panel: rgba(12,12,18,0.88);
  --border: rgba(255,255,255,0.16);
  --txt: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --cy:#84FFE2;
  --mg:#FF6FFB;
  --pu:#B89FFF;
  --go:#FFD86F;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(circle at top, #090919, #020208 70%);
  color: var(--txt);
  overflow:hidden;
}
@media (max-width:980px){ body{overflow:auto} }

.canvas-bg{position:fixed; inset:0; pointer-events:none; z-index:0;}
.filmgrain{
  pointer-events:none;
  position:fixed; inset:0; z-index:40;
  mix-blend-mode:overlay; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
a:hover{opacity:1}

.nav{
  position:fixed; top:18px; left:5vw; right:5vw;
  z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
.nav .logo{
  pointer-events:auto;
  font-family:"Playfair Display", serif;
  letter-spacing:.32em; text-transform:uppercase;
  font-size:.9rem; opacity:.9;
}
.nav .links{pointer-events:auto; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav .links a{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.78;
}
.nav .links a:hover{opacity:1}
.pill{
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(10,10,18,0.9);
  border-radius:999px;
  padding:.35rem .9rem;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  color:#fff;
  opacity:.92;
  transition:.25s ease;
  display:inline-block;
}
.pill:hover{background: linear-gradient(120deg,var(--cy),var(--pu)); color:#050509}

.page{
  position:relative; z-index:2;
  min-height:100vh;
  padding: 6vh 5vw 2vh;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.header{max-width:1200px; margin:0 auto}
.header h1{
  font-family:"Playfair Display", serif;
  letter-spacing:.42em;
  text-transform:uppercase;
  margin:.2rem 0 .4rem;
  font-size: clamp(2.4rem, 4.4vw, 3.4rem);
  text-shadow: 0 0 20px rgba(180,150,255,0.28);
}
.subtitle{opacity:.75; letter-spacing:.26em; text-transform:uppercase; font-size:.85rem}

.infobox{
  margin-top:.9rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(10,10,18,0.7);
  backdrop-filter: blur(16px);
  max-width: 980px;
  color: rgba(245,245,247,0.84);
  line-height:1.55;
}
.kbd{
  display:inline-block;
  padding:.18rem .45rem;
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;
  background: rgba(0,0,0,0.25);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.main{
  max-width:1300px;
  margin:0 auto;
  width:100%;
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(340px, 0.95fr);
  gap:1.2rem;
}
@media (max-width:980px){
  .main{grid-template-columns:1fr; grid-template-rows:minmax(380px, 60vh) auto;}
}

.card{
  border:1px solid var(--border);
  border-radius:22px;
  background: radial-gradient(circle at top, rgba(100,80,200,0.18), rgba(8,8,16,0.98));
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.85);
}

.footer{
  text-align:center;
  opacity:.6;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  padding:.6rem 0 .2rem;
}
.footer .small{margin-top:.35rem; opacity:.75; font-size:.72rem; letter-spacing:.12em}

/* Theme switcher (classic / neon / deep / silver) */
:root[data-theme="classic"]{
  --cy:#84FFE2; --mg:#FF6FFB; --pu:#B89FFF; --go:#FFD86F;
}
:root[data-theme="neon"]{
  --cy:#4DFFE1; --mg:#FF3DFF; --pu:#9A7BFF; --go:#FFE36A;
}
:root[data-theme="deep"]{
  --cy:#6BE7FF; --mg:#FF6FD8; --pu:#C9B6FF; --go:#FFC56A;
}
:root[data-theme="silver"]{
  --cy:#BFF7FF; --mg:#FFC0F5; --pu:#E2D9FF; --go:#FFE7B5;
  --panel: rgba(16,16,22,0.78);
  --border: rgba(255,255,255,0.20);
}