.o-surface{--surface-gap: var(--space-unit-2);--surface-padding: var(--space-unit-6);--surface-radius: var(--radius-card-md);--surface-bg: var(--ql-surface-bg, var(--surface-1, white));--surface-fg: var(--ql-surface-fg, var(--text, var(--text-inversed)));--surface-maxw: 100%;--surface-minh: 600px;--surface-elevation: 8;display:grid;gap:var(--surface-gap);padding:var(--surface-padding);border-radius:var(--surface-radius);background:var(--surface-bg);color:var(--surface-fg);max-width:var(--surface-maxw);min-height:var(--surface-minh);height:auto}@media (prefers-reduced-motion: no-preference){.o-surface{transition:box-shadow var(--motion-card-hover-duration) var(--motion-card-hover-easing), transform var(--motion-card-hover-duration) var(--motion-card-hover-easing)}.o-surface:is(:hover, :focus-within){transform:translateY(calc(-1 * var(--motion-translate-micro)))}}