:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10181c; color: #eef5f1; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button { background: #a5ed3f; border: 0; border-radius: 7px; color: #13200d; cursor: pointer; font-weight: 800; min-height: 48px; padding: 0 18px; }
button:hover { background: #c0ff68; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, input:focus-visible { outline: 3px solid #d6ff9d; outline-offset: 3px; }
.pair-layout { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(420px, 1.1fr); min-height: 100vh; }
.brand-panel { background: #21333a; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 7vw, 108px); }
.eyebrow { color: #a5ed3f; font-size: .72rem; font-weight: 800; letter-spacing: .09em; margin: 0; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { color: #fcfff7; font-size: clamp(4rem, 8vw, 8rem); line-height: .83; margin-top: 22px; }
.brand-copy { color: #d2e0dc; font-size: 1.1rem; line-height: 1.55; margin-top: 34px; max-width: 30ch; }
.service-notes { border-top: 1px solid #547078; margin: 52px 0 0; padding-top: 18px; }
.service-notes div { display: grid; gap: 14px; grid-template-columns: 2rem 1fr; padding: 11px 0; }
.service-notes dt { color: #a5ed3f; font-family: ui-monospace, monospace; font-size: .78rem; }
.service-notes dd { color: #d2e0dc; margin: 0; }
.pair-workspace { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; max-width: 640px; padding: clamp(32px, 7vw, 108px); width: 100%; }
.workspace-heading { border-bottom: 1px solid #344a50; padding-bottom: 30px; }
.service-state { color: #a5ed3f; display: inline-flex; font-family: ui-monospace, monospace; font-size: .78rem; font-weight: 700; margin-bottom: 28px; }
.service-state::before { background: currentColor; border-radius: 50%; content: ""; height: .55rem; margin: .18rem .55rem 0 0; width: .55rem; }
.service-state--warning { color: #ffb95b; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: 0; }
.workspace-heading p:not(.eyebrow) { color: #aebfbb; line-height: 1.55; margin-top: 12px; max-width: 52ch; }
.pair-form { display: grid; gap: 17px; margin-top: 34px; }
label { color: #c6d6d1; display: grid; font-size: .8rem; font-weight: 750; gap: 8px; }
input { background: #172429; border: 1px solid #466067; border-radius: 6px; color: #f7fffa; min-height: 48px; padding: 0 14px; }
.form-error { color: #ffaaa0; line-height: 1.45; margin-top: 14px; }
.pair-result { border-top: 1px solid #344a50; margin-top: 35px; padding-top: 25px; }
.pair-result code { color: #d8ff99; display: block; font-family: ui-monospace, monospace; font-size: clamp(1.55rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: .12em; margin: 12px 0; overflow-wrap: anywhere; }
.pair-result > p:not(.eyebrow) { color: #d9e4df; line-height: 1.5; }
.pair-instructions { color: #9eb3ad !important; font-size: .875rem; margin-top: 15px; }
@media (max-width: 780px) { .pair-layout { grid-template-columns: 1fr; }.brand-panel { min-height: 43vh; }.service-notes { display: none; }.pair-workspace { justify-content: flex-start; }.pair-result { margin-bottom: 28px; } }