:root { --ink:#f3f4f7; --muted:#c6c9d1; --accent:#b7c4d5; --coral:#b7c4d5; --line:#e2eaff30; }
body { background:radial-gradient(ellipse at 75% 14%,#656c8155,transparent 44%),radial-gradient(ellipse at 10% 59%,#5e68874f,transparent 45%),linear-gradient(125deg,#090b12,#20232e 50%,#090b13); position:relative; isolation:isolate; }
body::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('glass-backdrop.svg') center top / 1600px 1600px repeat-y; }
header { background:#171a232b; backdrop-filter:blur(18px); }
h1 em { color:#dfe5ef; }
.primary,button.primary:hover,a.primary:hover { color:#f4f7ff; border-color:#f0f6ff65; background:linear-gradient(155deg,#f0f5ff32,#e8efff0c 55%,#e3edff20); box-shadow:inset 0 1px 0 #fff5,inset 0 -1px 0 #fff1,0 4px 16px #0004; backdrop-filter:blur(12px); }
.key-display,article,dialog { background:linear-gradient(125deg,#eff4ff14,#a9b9d207 42%,#03071021); border:1px solid #e4efff35; border-top-color:#edf6ff8a; border-left-color:#dceaff61; box-shadow:inset 0 1px 1px #ffffff30,inset 0 -1px 1px #0006,0 24px 48px #0005; backdrop-filter:blur(14px) saturate(75%); -webkit-backdrop-filter:blur(14px) saturate(75%); position:relative; overflow:hidden; }
.key-display::before { z-index:-1; inset:0; border:0; border-radius:inherit; background:linear-gradient(120deg,transparent 9%,#ffffff16 10%,#ffffff03 36%,transparent 37%,transparent 70%,#ffffff0b 71%,transparent 90%); }
.key-display::after,article::after { content:''; position:absolute; pointer-events:none; inset:0; border-radius:inherit; background:linear-gradient(130deg,#ffffff10,transparent 36%,transparent 69%,#ffffff06); box-shadow:inset 1px 1px 0 #ffffff17; }
.key-display { transform:perspective(1800px) rotateY(-5deg); }
.key-display img { filter:drop-shadow(0 20px 16px #0007); }
.instrument span:last-child,.eyebrow,.brand strong { color:#c2cad8; }
.brand::before { border-color:#d1dbe8; }
article { min-height:235px; }
.filters { padding:1.2rem; border:1px solid #e2eaff30; border-radius:.8rem; background:#c1cce50b; backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 #ffffff25,0 12px 30px #0002; }
button,.button,input,select { background:#10131d55; border-color:#c1ccdf40; }
.alphabet button[aria-pressed=true] { background:#e8eef829; color:#fff; border-color:#e7efff9c; }
dialog { background-color:#171b29c9; }
#games,#cosmic,footer { border-image:linear-gradient(90deg,#e3eeff55,#bcc9dd20,transparent) 1; }
@media(max-width:760px) { .key-display { transform:none; } }