.glass{position:relative;background:var(--glass-tint);border-radius:var(--radius-card);box-shadow:var(--shadow-card),var(--glass-edge-shadow);backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter);overflow:hidden;isolation:isolate}.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(var(--glass-light-angle),var(--glass-light-from),transparent 60%),linear-gradient(to bottom,var(--panel-gradient-from),var(--panel-gradient-to));box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),inset 1px 0 0 rgba(255,255,255,0.20),inset 0 -1px 0 rgba(0,0,0,0.16),inset -1px 0 0 rgba(0,0,0,0.08),inset 0 3px 6px -4px rgba(255,255,255,0.35),inset 0 -3px 8px -4px rgba(0,0,0,0.14);pointer-events:none;z-index:-1}.glass--readable{--panel-gradient-from:rgba(40,43,50,0.78);--panel-gradient-to:rgba(26,28,33,0.84);background:var(--glass-tint-strong)}.glass--cream{--panel-gradient-from:rgba(255,244,228,0.86);--panel-gradient-to:rgba(255,235,210,0.82);background:rgba(255,240,220,0.55);color:var(--ink)}.glass--cream :where(h1,h2,h3,h4){color:var(--ink)}.glass--gray{--panel-gradient-from:rgba(128,128,128,0.55);--panel-gradient-to:rgba(128,128,128,0.55)}.glass--interactive{transition:transform var(--t-med),box-shadow var(--t-med)}.glass--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover),var(--glass-edge-shadow)}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(28,30,35,0.92)}.glass--cream{background:rgba(255,240,220,0.95)}}