/* =========================================================================== Playground shared theme — "Command Deck × Liquid Glass". Add and class="atp-theme" on to give any page the unified gradient backdrop + glass tokens. It ONLY sets the page background + a few CSS variables, so it layers over a page's own components without clobbering their layout. Opt into frosted panels per page by adding backdrop-filter to that page's own card selector. =========================================================================== */ :root{ --atp-accent:#9fc0ff; /* icy blue */ --atp-accent-2:#8a8bff; /* indigo */ --atp-glass:rgba(255,255,255,.08); --atp-glass-bd:rgba(255,255,255,.14); --atp-glass-blur:blur(15px) saturate(1.12); } body.atp-theme{ background: radial-gradient(620px circle at 8% -10%, rgba(90,120,255,.28), transparent 62%), radial-gradient(640px circle at 96% 6%, rgba(150,90,255,.22), transparent 62%), radial-gradient(760px circle at 50% 120%,rgba(40,200,200,.12), transparent 55%), linear-gradient(180deg,#0b0d16,#05060c) !important; background-attachment:fixed !important; } html[data-theme="light"] body.atp-theme{ background: radial-gradient(620px circle at 8% -10%, rgba(150,180,255,.5), transparent 62%), radial-gradient(640px circle at 96% 6%, rgba(200,166,255,.45), transparent 62%), radial-gradient(760px circle at 50% 120%,rgba(140,230,220,.3), transparent 55%), linear-gradient(180deg,#eef2fb,#e7ecf8) !important; } /* optional helper: any element tagged .atp-glass becomes a frosted panel */ @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){ .atp-glass{ -webkit-backdrop-filter:var(--atp-glass-blur); backdrop-filter:var(--atp-glass-blur); } }