.glass-surface{border:var(--sonic-surface-line);border-radius:var(--sonic-surface-radius);background:var(--sonic-surface-bg);box-shadow:var(--sonic-surface-shadow);color:inherit;-webkit-backdrop-filter:blur(var(--sonic-surface-blur)) saturate(var(--sonic-surface-saturation));transition:background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);position:relative}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-surface{-webkit-backdrop-filter:blur(var(--sonic-surface-blur)) saturate(var(--sonic-surface-saturation));backdrop-filter:blur(var(--sonic-surface-blur)) saturate(var(--sonic-surface-saturation))}}.glass-surface--tile{--sonic-surface-bg:var(--sonic-surface-tile-bg);--sonic-surface-bg-hover:var(--sonic-surface-tile-bg-hover);--sonic-surface-shadow:var(--sonic-surface-tile-shadow)}.glass-surface--panel{--sonic-surface-bg:var(--sonic-surface-panel-bg);--sonic-surface-bg-hover:var(--sonic-surface-panel-bg-hover);--sonic-surface-shadow:var(--sonic-surface-panel-shadow)}.glass-surface--hud{--sonic-surface-bg:var(--sonic-surface-hud-bg);--sonic-surface-bg-hover:var(--sonic-surface-hud-bg-hover);--sonic-surface-shadow:var(--sonic-surface-hud-shadow)}.glass-surface--row{--sonic-surface-bg:var(--sonic-surface-row-bg);--sonic-surface-bg-hover:var(--sonic-surface-row-bg-hover);--sonic-surface-shadow:var(--sonic-surface-row-shadow)}.glass-surface.surface-accented,.glass-surface.glass-surface--accented{--sonic-surface-bg:color-mix(in srgb, var(--sonic-surface-accent,var(--color-accent-primary)) var(--sonic-surface-accent-strength,22%), var(--sonic-surface-row-bg));--sonic-surface-bg-hover:color-mix(in srgb, var(--sonic-surface-accent,var(--color-accent-primary)) calc(var(--sonic-surface-accent-strength,22%) + 6%), var(--sonic-surface-row-bg-hover))}.glass-surface[data-state=active]{--sonic-surface-bg:var(--sonic-surface-bg-hover);--sonic-surface-shadow:var(--sonic-surface-tile-shadow), var(--sonic-surface-active-glow)}.glass-surface.selection-ring[data-state=active]:after,.glass-surface.selection-ring[data-selected=true]:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 2px var(--color-accent-primary);pointer-events:none;z-index:1;position:absolute;inset:0}.glass-surface[data-interactive=true]{cursor:pointer}.glass-surface[data-interactive=true]:hover{background:var(--sonic-surface-bg-hover)}@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-surface{background:var(--sonic-surface-fallback-bg)}}@media (prefers-reduced-transparency:reduce){.glass-surface{background:var(--sonic-surface-fallback-bg);-webkit-backdrop-filter:none}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.glass-surface{-webkit-backdrop-filter:none;backdrop-filter:none}}}@media (prefers-reduced-motion:reduce){.glass-surface{transition:none}}