:root { color-scheme: light; --event-bg: #f8fafc; --event-panel: #fff; --event-text: #172033; --event-border: #94a3b8; }
[data-theme="dark"] { color-scheme: dark; --event-bg: #0f172a; --event-panel: #182235; --event-text: #f1f5f9; --event-border: #64748b; }
body { margin: 0; background: var(--event-bg); color: var(--event-text); font-family: Inter, system-ui, sans-serif; line-height: 1.5; }
[hidden] { display: none !important; }
.event-workspace { max-width: 72rem; padding: 1rem; margin: auto; min-width: 0; }
.event-workspace h1 { font-size: 1.75rem; font-weight: 700; margin: 1rem 0; }
.event-workspace h2 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0; }
.event-workspace p { margin: .75rem 0; }
.event-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0; }
.event-panel, .event-button, .event-input { background: var(--event-panel); color: var(--event-text); border: .0625rem solid var(--event-border); border-radius: .75rem; }
.event-panel { padding: 1rem; overflow-wrap: anywhere; min-width: 0; }
.event-button, .event-input { min-height: 2.75rem; padding: .625rem .875rem; max-width: 100%; font: inherit; }
.event-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.event-button:disabled { cursor: default; opacity: .5; }
.event-input { display: block; width: 100%; margin-top: .5rem; }
.event-button:focus-visible, .event-input:focus-visible { outline: .1875rem solid #818cf8; outline-offset: .1875rem; }
.event-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 48rem) { .event-workspace { padding: 1.5rem; } .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .event-workspace * { animation: none; transition: none; scroll-behavior: auto; } }