html,body{background:linear-gradient(135deg,#212121,#2b2b2b,#3a3a3a);min-height:100%}:root{--bg-start: #222222;--bg-mid: #131313;--bg-end: #000000;--accent-1: #ff7f00;--accent-2: #ed5829;--glass-bg: rgba(24, 24, 24, .05);--glass-border: rgba(255,255,255,.12)}@property --rotation{syntax: "<angle>"; initial-value: 0deg; inherits: false;}body:before,body:after{content:"";position:fixed;top:-25vh;right:-25vh;bottom:-25vh;left:-25vh;z-index:-1;filter:blur(120px);opacity:.5}body:before{background:conic-gradient(from var(--rotation) at 50% 50%,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%),radial-gradient(600px circle at 20% 15%,rgba(255,127,0,.14),transparent 55%),radial-gradient(900px circle at 80% 85%,rgba(237,88,41,.12),transparent 65%);animation:bgFloatA 22s ease-in-out infinite alternate,rotate 60s linear infinite}body:after{background:radial-gradient(700px circle at 70% 20%,rgba(12,12,12,.08),transparent 60%),radial-gradient(800px circle at 15% 80%,rgba(36,36,36,.06),transparent 70%);animation:bgFloatB 28s ease-in-out infinite alternate}@keyframes bgFloatA{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.08)}}@keyframes bgFloatB{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.06)}}@keyframes rotate{to{--rotation: 360deg}}.liquid-glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);box-shadow:0 20px 60px -20px #00000080,inset 0 1px #ffffff0f}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);box-shadow:0 12px 30px -12px #00000073;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.glass-card:hover{transform:translateY(-2px);border-color:#fff3;box-shadow:0 16px 40px -16px #0000008c}