:root { --dog-navy:#193b5a; --dog-blue:#3e75a9; --dog-cloud:#f6f9fc; --dog-ink:#263545; --dog-muted:#52677a; --dog-rule:#d5dfe7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.dog-site { margin:0; background:var(--dog-cloud); color:var(--dog-ink); font-family:Inter,system-ui,sans-serif; }
.dog-site a { color:var(--dog-navy); text-underline-offset:3px; }
.dog-site button,.dog-site input { font:inherit; }
.dog-site a:focus-visible,.dog-site button:focus-visible,.dog-site input:focus-visible { outline:3px solid #3e75a9; outline-offset:4px; }
.dog-site [hidden] { display:none !important; }
.skip-link { position:absolute; left:-9999px; top:0; }
.skip-link:focus { left:12px; top:12px; z-index:200; padding:12px; background:white; }
.dog-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:80px; padding:max(14px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 14px max(24px,env(safe-area-inset-left)); border-bottom:1px solid var(--dog-rule); background:var(--dog-cloud); }
.dog-header .dog-brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-size:24px; font-weight:700; letter-spacing:-1px; color:var(--dog-navy); }
.dog-word { font-weight:450; }
.dog-header nav { display:flex; align-items:center; gap:24px; }
.dog-header nav a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:600; text-decoration:none; }
.dog-header nav a:hover,.dog-footer a:hover { text-decoration:underline; }
.dog-header [data-account-link] { padding:0 16px; border:1px solid var(--dog-rule); border-radius:8px; }
.dog-site #root { min-height:calc(100vh - 240px); }
.dog-loading { padding:80px 24px; text-align:center; color:var(--dog-muted); }
.dog-site .style-bar { background:rgba(246,249,252,.95); border-bottom-color:var(--dog-rule); top:0; }
.dog-site .style-bar.dark { background:rgba(19,20,26,.96); }
.dog-site .fcc-page { padding-top:32px !important; }
.dog-footer { padding:28px max(24px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between; background:var(--dog-cloud); color:var(--dog-muted); border-top:1px solid var(--dog-rule); font-size:12px; line-height:1.7; }
.dog-footer strong { display:block; color:var(--dog-navy); font-size:14px; font-weight:650; }
.dog-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.dog-footer small { width:100%; font-size:10px; letter-spacing:.05em; }
.dog-prose { display:block !important; width:min(100% - 40px,700px); margin:64px auto 88px; line-height:1.8; font-size:16px; }
.dog-prose .eyebrow { text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:700; color:var(--dog-blue); margin:0 0 18px; }
.dog-prose h1 { font-family:'Source Serif 4',Georgia,serif; color:var(--dog-navy); font-size:clamp(40px,6vw,64px); font-weight:500; letter-spacing:-.04em; line-height:1.06; margin:0 0 28px; }
.dog-prose h2 { font-size:21px; line-height:1.3; letter-spacing:-.02em; color:var(--dog-navy); margin:38px 0 12px; }
.dog-prose p { margin:14px 0; }
.dog-prose .lead { font-size:19px; line-height:1.7; color:var(--dog-muted); margin-bottom:26px; }
.dog-prose hr { border:0; border-top:1px solid var(--dog-rule); margin:38px 0; }
.dog-button,.dog-prose .dog-button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:12px 20px; border:1px solid var(--dog-navy); border-radius:8px; background:var(--dog-navy); color:white; font-size:14px; font-weight:650; line-height:1.5; text-decoration:none; cursor:pointer; }
.dog-button:hover { background:#285578; }
.dog-secondary { min-height:44px; padding:10px 14px; background:transparent; color:var(--dog-navy); border:1px solid var(--dog-rule); border-radius:8px; cursor:pointer; font-size:13px !important; }
.dog-site button:disabled { opacity:.55; cursor:wait; }
.dog-prose .small { font-size:13px; color:var(--dog-muted); }
.dog-auth { max-width:520px; }
.dog-auth label { display:block; font-size:13px; font-weight:650; margin:0 0 7px; }
.dog-auth input { display:block; width:100%; border:1px solid #95aabd; border-radius:8px; min-height:50px; background:white; color:var(--dog-ink); padding:12px 14px; margin-bottom:18px; font-size:17px; }
.dog-auth #code { font-family:'JetBrains Mono',monospace; font-size:28px; letter-spacing:.4em; }
.dog-auth form > button { width:100%; }
.auth-actions { display:flex; gap:12px; flex-wrap:wrap; }
.auth-status { font-size:13px; color:var(--dog-muted); min-height:22px; }
#auth-error { padding:14px 16px; margin:18px 0; border-left:3px solid #a42d24; color:#852c25; background:#fceee9; line-height:1.6; font-size:14px; }
.dog-noscript { max-width:600px; padding:24px; margin:auto; }
@media(min-width:1200px) { .dog-header,.dog-footer { padding-left:calc((100vw - 1100px)/2); padding-right:calc((100vw - 1100px)/2); } }
@media(max-width:600px) { .dog-header { min-height:70px; gap:12px; padding:12px 16px; } .dog-header .dog-brand { font-size:20px; gap:8px; } .dog-brand img { width:34px; height:34px; } .dog-header nav { gap:12px; } .dog-header nav a { font-size:12px; } .dog-header nav .about-nav { display:none; } .dog-header [data-account-link] { padding:0 10px; } .dog-footer { padding:24px 20px; } .dog-prose { margin-top:38px; margin-bottom:56px; } .dog-prose .lead { font-size:17px; } }
@media(max-width:600px) { .dog-site .style-bar { flex-wrap:wrap; justify-content:center; overflow:visible; gap:8px; } .dog-site .sudoku-history-trigger { margin-left:0; min-height:40px; } }
@media(max-width:360px) { .dog-header { gap:8px; padding:10px 12px; } .dog-header .dog-brand { font-size:18px; } .dog-brand img { width:28px; height:28px; } .dog-header nav { gap:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }