/* EngineerHow adaptation, 2026-10-12. PairDrop layout and dialogs retained. */
:root, body { --primary-color:#087e8b; --primary-color-rgb:8,126,139; }
body.light-theme { --text-color:22,42,54; --bg-color:245,250,251; --dialog-bg-color:#fff; --bg-color-secondary:#ebf5f6; }
body { background:radial-gradient(ellipse at 50% 48%,#e4f4f2 0, #f5fafb 60%); }
.eh-top { display:flex; align-items:center; justify-content:space-between; padding:22px 6vw 8px; flex-shrink:0; }
.eh-brand { display:flex; align-items:center; gap:12px; font-size:20px; letter-spacing:-.5px; color:#183643; }
.eh-brand strong { color:#087e8b; font-weight:500; }
.eh-mark { display:grid; place-items:center; width:42px; height:42px; background:#087e8b; color:white; border-radius:12px; font-size:17px; font-weight:700; }
.eh-tag,.eh-eyebrow { font-size:10px; letter-spacing:1.8px; font-weight:700; color:#46737b; }
.eh-hero { text-align:center; padding:12px 20px 6px; flex-shrink:0; }
.eh-hero h1 { font-size:clamp(30px,5vw,48px); line-height:1.2; letter-spacing:-1.8px; margin:14px 0; color:#163443; }
.eh-hero p { max-width:510px; margin:0 auto; font-size:15px; line-height:1.7; color:#59707b; }
.eh-pills { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.eh-pills span { border:1px solid #d7e7e8; border-radius:24px; background:#fff9; color:#41646b; padding:5px 12px; font-size:11px; }
body > header { width:min(700px,100%); margin:0 auto; justify-content:center; flex-direction:row; min-height:52px; }
#theme-wrapper { display:none; }
#center { min-height:150px; border:1px dashed #a8ced0; border-radius:24px; margin:6px auto 12px; width:min(820px,calc(100% - 40px)); background:#ffffff70; }
x-no-peers { height:auto; padding:20px; }
x-no-peers h2 { font-size:20px; letter-spacing:-.5px; }
x-no-peers > div { max-width:410px; line-height:1.7; color:#59707b; }
x-peers { max-width:100%; }
.eh-note { text-align:center; color:#66818a; font-size:11px; line-height:1.7; flex-shrink:0; padding:0 16px 8px; }
.eh-note a { text-decoration:underline; text-underline-offset:3px; }
footer .logo { display:none; }
footer { padding-bottom:10px; font-size:12px; }
x-paper { border-radius:22px; }
x-about section { max-width:650px; padding:24px; box-sizing:border-box; text-align:center; }
x-about a { color:#087e8b; }
.btn { border-radius:12px; }
x-toast:not([show]) { visibility:hidden; pointer-events:none; }
@media(max-width:540px) { .eh-top { padding:16px 20px 8px; } .eh-tag { display:none; } .eh-brand { font-size:18px; } .eh-hero { padding-top:8px; } .eh-hero p { font-size:13px; } .eh-hero h1 { margin:9px 0; } .eh-eyebrow { font-size:8px; } .eh-pills { margin:12px 0 0; } #center { margin-top:2px; width:calc(100% - 28px); } }
@media(max-height:700px) { .eh-pills,.eh-eyebrow { display:none; } .eh-hero p { font-size:12px; max-width:480px; } .eh-hero h1 { font-size:28px; margin:5px 0; } .eh-top { padding-top:10px; } }
@media(max-height:480px) { .eh-hero,.eh-note { display:none; } }