:root { color-scheme: light; font-family: system-ui, sans-serif; color: #19352e; background: #f3f6f2; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 700px; padding: 64px 24px; margin: auto; }
.label { font-size: .75rem; letter-spacing: .16em; font-weight: 700; color: #527165; }
h1 { font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.045em; line-height: 1.12; }
.intro { font-size: 1.15rem; color: #527165; margin-bottom: 36px; }
section { background: #fff; border: 1px solid #dde6df; border-radius: 20px; padding: 28px; margin: 24px 0; }
h2 { margin-top: 0; font-size: 1.3rem; } h3 { margin-top: 28px; }
p { line-height: 1.6; } label { display: block; font-weight: 600; margin: 24px 0 8px; }
input { width: 100%; padding: 13px; border: 1px solid #aabcb1; border-radius: 8px; font: inherit; }
button { cursor: pointer; border: 0; border-radius: 9px; background: #1b604b; color: white; padding: 13px 18px; margin-top: 16px; font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #85b7a5; outline-offset: 3px; }
.secondary { background: #edf3ef; color: #19352e; margin-top: 0; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
code { font-size: .85rem; overflow-wrap: anywhere; }
#mcp-url { display: block; background: #f0f5f1; padding: 15px; border-radius: 8px; }
#qr { display: block; max-width: 100%; height: auto; margin: 20px auto; }
#qr[hidden], [hidden] { display: none; }
#error { color: #9c2929; } footer { color: #607569; font-size: .85rem; line-height: 1.6; }