:root{color-scheme:light;--ink:#422610;--gold:#bf8c26;--paper:#fff;--muted:#685d51;--line:#e4d9cb;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;border-top:6px solid var(--gold)}
main{width:min(100% - 40px,440px);margin:0 auto;padding:32px 0 26px}
.brand{text-align:center;padding-bottom:26px;border-bottom:1px solid var(--line)}
.brand p{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.35rem,6vw,1.8rem);font-weight:700;letter-spacing:.04em;margin:0 0 5px;line-height:1.25}
.brand p span{color:#8b621a}
.brand-sub{font-size:.875rem;font-weight:600;letter-spacing:.22em}
.wifi{padding-top:27px}
.wifi-icon{display:block;margin:0 auto 15px;color:#956716}
h1{font-family:Georgia,'Times New Roman',serif;text-align:center;font-size:2.5rem;line-height:1.15;margin:0 0 25px;letter-spacing:-.035em}
.credentials{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:#fffdf8}
.label{display:block;font-size:.875rem;line-height:1.5;font-weight:700;letter-spacing:.08em;color:var(--muted);margin:0 0 6px}
.network{font-size:1.3rem;font-weight:600;line-height:1.35;margin:0;overflow-wrap:anywhere}
.divider{height:1px;background:var(--line);margin:18px 0}
#wifi-password{display:block;width:100%;font-family:ui-monospace,'Courier New',monospace;font-size:1.5rem;line-height:1.4;color:var(--ink);border:0;padding:0;background:transparent;border-radius:2px;letter-spacing:.025em}
#wifi-password:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#copy-password{display:block;width:100%;min-height:54px;border:0;border-radius:9px;background:var(--ink);color:white;font:700 1.0625rem/1.3 Arial,Helvetica,sans-serif;padding:15px 20px;margin:16px 0 0;cursor:pointer;touch-action:manipulation}
#copy-password:hover{background:#60391a}
#copy-password:active{background:#2d190a}
#copy-password:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
#copy-status{min-height:1.5em;margin:8px 0 14px;font-size:.9375rem;line-height:1.5;text-align:center;color:var(--muted)}
.instructions{font-size:1rem;line-height:1.55;margin:0 0 25px;padding-left:24px;color:var(--muted)}
.instructions li{padding-left:4px;margin:0 0 9px}
.instructions strong{color:var(--ink);font-weight:600}
.qr-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
summary{font-size:1rem;line-height:1.5;padding:18px 2px;cursor:pointer}
.qr-content{text-align:center;padding:0 8px 18px}
.qr-content img{display:block;width:min(100%,270px);height:auto;margin:0 auto}
.qr-content p{font-size:1rem;line-height:1.5;max-width:300px;margin:4px auto 0;color:var(--muted)}
footer{text-align:center;font-family:Georgia,'Times New Roman',serif;font-size:1.125rem;font-style:italic;color:#765318;margin-top:25px}
@media(min-width:700px){body{background:#f9f6f0}main{background:white;width:520px;padding:36px 40px 30px;margin:36px auto;border:1px solid var(--line);border-radius:18px}}
@media(max-width:360px){main{width:calc(100% - 28px);padding-top:24px}.credentials{padding:18px}h1{font-size:2.15rem}}