:root { color-scheme: light dark; --fg: #172332; --bg: #ffffff; --note: #eef3fc; --accent: #1758cf; --muted: #5b6676; }
@media (prefers-color-scheme: dark) { :root { --fg: #e8edf4; --bg: #12171f; --note: #1d2735; --accent: #5a8ff0; --muted: #a3adbb; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 30rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
h1 { font-size: 1.45rem; margin: 0 0 1rem; }
.note { background: var(--note); padding: .9rem 1rem; border-radius: .5rem; margin: 0 0 1rem; }
.request { color: var(--muted); font-size: .9rem; word-break: break-all; min-height: 1.4rem; }
label { display: block; margin: .9rem 0 .3rem; font-weight: 600; }
input { width: 100%; padding: .8rem; font: inherit; border: 1px solid var(--muted); border-radius: .45rem; background: var(--bg); color: var(--fg); }
button { width: 100%; margin-top: 1.1rem; padding: .85rem; font: inherit; font-weight: 600; color: #fff; background: var(--accent); border: 0; border-radius: .45rem; }
button:disabled { opacity: .5; }
#result { min-height: 2rem; margin-top: 1.2rem; }