:root { color-scheme: light dark; font-family: system-ui, -apple-system, sans-serif; line-height: 1.65; color: light-dark(#25232b, #eeecf3); background: light-dark(#faf9fc, #1c1b20); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
body { margin: 0; }
main { width: min(100%, 48rem); padding: clamp(1.25rem, 5vw, 3rem); margin: 0 auto; overflow-wrap: anywhere; }
.eyebrow { font-size: .8rem; letter-spacing: .1em; color: light-dark(#625f6c, #bbb6c9); margin: 0 0 .75rem; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; margin: 0 0 .75rem; }
.intro { margin: 0 0 1.75rem; }
section { border: 1px solid light-dark(#d8d4df, #55505f); border-radius: 1rem; padding: 1.25rem; }
h2 { font-size: 1rem; margin: 0; }
ul { padding-inline-start: 1.25rem; margin: .75rem 0; }
li + li { margin-top: .3rem; }
.note { font-size: .875rem; color: light-dark(#625f6c, #bbb6c9); }
section .note { margin-bottom: 0; }
#connection { padding: 1rem 0 0; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
button { font: inherit; min-height: 44px; padding: .55rem 1rem; border: 1px solid transparent; border-radius: 1.5rem; color: light-dark(#fff, #261b30); background: light-dark(#5c337a, #d6b5ed); cursor: pointer; max-width: 100%; white-space: normal; }
button.secondary { color: inherit; background: transparent; border-color: light-dark(#b4adbf, #7e758b); }
button:focus-visible { outline: 3px solid light-dark(#276aa3, #8dc8fa); outline-offset: 3px; }
button:disabled { opacity: .55; cursor: wait; }
#action-status { margin-bottom: 0; }
#connection-result { margin-top: 1.25rem; }
#connection-result label { display: block; margin-bottom: .5rem; font-weight: 600; }
textarea { width: 100%; max-width: 100%; resize: vertical; padding: .75rem; margin-bottom: .75rem; border: 1px solid light-dark(#b4adbf, #7e758b); border-radius: .5rem; font: .875rem/1.5 ui-monospace, monospace; color: inherit; background: light-dark(#fff, #252329); }
textarea:focus-visible { outline: 3px solid light-dark(#276aa3, #8dc8fa); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }