:root { --bg: #17162A; --fg: #F5F4FB; --link: #7E6DF6; --btn: #5E49F4; --err: #FFB4B4; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 1rem/1.5 system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem; }
h1 { font-size: 1.75rem; line-height: 1.2; }
a { color: var(--link); }
label { display: block; font-weight: 600; margin-top: 1.5rem; }
.hint, .note { color: var(--fg); opacity: 1; }
input { width: 100%; min-height: 44px; padding: .5rem .75rem; font: inherit; color: #17162A; background: #FFFFFF;
  border: 2px solid #8F8CA8; border-radius: .375rem; overflow-wrap: anywhere; }
button { margin-top: 1rem; min-height: 44px; padding: .5rem 1.25rem; font: inherit; font-weight: 600; color: #FFFFFF;
  background: var(--btn); border: 2px solid transparent; border-radius: .375rem; cursor: pointer; }
button[disabled] { cursor: progress; }
:focus-visible { outline: 3px solid #F5F4FB; outline-offset: 3px; }
input:focus-visible { outline-color: #7E6DF6; }
.error { color: var(--err); font-weight: 600; }
#result { margin-top: 1.5rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; margin-top: 2.5rem; }
#network-status { margin-top: 1rem; overflow-wrap: anywhere; }
.net div { margin-top: 1rem; }
.net dt { font-weight: 600; }
.net dd { margin: .25rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.net code { overflow-wrap: anywhere; }
button.copy { margin-top: 0; min-width: 44px; color: var(--fg); background: transparent; border-color: var(--link); }
li { margin-top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }