[data-module-id="example.surface-table-interface"] .gw-example { box-sizing: border-box; max-width: 640px; padding: var(--space-3); margin: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); font: 14px/1.5 system-ui, sans-serif; }
[data-module-id="example.surface-table-interface"] .gw-example h3 { font-size: 16px; margin: var(--space-0) var(--space-0) var(--space-2); }
[data-module-id="example.surface-table-interface"] .gw-example pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
[data-module-id="example.surface-table-interface"] .gw-example button, [data-module-id="example.surface-table-interface"] .gw-example select, [data-module-id="example.surface-table-interface"] .gw-example input { color: inherit; background: var(--surface); font: inherit; padding: var(--space-1) var(--space-2); margin: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); }
[data-module-id="example.surface-table-interface"] .gw-example button:focus-visible, [data-module-id="example.surface-table-interface"] .gw-example input:focus-visible, [data-module-id="example.surface-table-interface"] .gw-example select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-module-id="example.surface-table-interface"] .gw-example--compact { padding: var(--space-1); }
[data-module-id="example.surface-table-interface"] .gw-example-center { position: absolute; transform: translate(-50%, -50%); pointer-events: none; color: var(--text); background: var(--surface); padding: var(--space-1); border-radius: var(--radius-sm); font: 14px/1.5 system-ui, sans-serif; }
[data-module-id="example.surface-table-interface"] > .gw-example { position: fixed; top: 64px; left: var(--space-4); width: 360px; max-width: min(360px, calc(100vw - 32px)); max-height: 40vh; overflow: auto; margin: var(--space-0); z-index: 20; }