:root{color-scheme:light;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#14283f;background:#f5f7fb}*{box-sizing:border-box}body{margin:0}header{background:#122b47;color:white;padding:18px max(18px,calc((100vw - 1000px)/2))}header h1{font-size:1.35rem;margin:0 0 12px}nav{display:flex;gap:12px}nav a{color:#dbeaff;text-decoration:none;border:1px solid #6b839c;border-radius:10px;padding:7px 13px}nav a.active{color:#122b47;background:white}.wrap{max-width:1020px;margin:24px auto;padding:0 16px}.toolbar,.stats,.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.toolbar,.card,.number-panel{background:white;border:1px solid #e0e5ec;border-radius:16px;padding:20px;margin-bottom:17px;box-shadow:0 2px 10px #1d35520b}.toolbar label{display:flex;align-items:center;gap:6px;font-size:.92rem}.toolbar input[type=number]{width:75px}.toolbar input[type=text]{max-width:190px}input,select{font:inherit;padding:8px;border:1px solid #b7c5d7;border-radius:8px}input[type=checkbox],input[type=radio]{accent-color:#1c6fb9}button{font:inherit;cursor:pointer;border:0;border-radius:9px;padding:10px 13px;background:#1468a9;color:white}button.secondary{color:#1d4e76;background:#e9f3fc}button.danger{background:#b73c3c}.stats{margin-bottom:17px}.stats span{background:#e4ecf7;padding:8px 12px;border-radius:9px}.muted{color:#64748b}h2{font-size:1.3rem;line-height:1.45}.option{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid #d6e1ed;border-radius:10px;margin:9px 0;cursor:pointer;line-height:1.5}.option.good,.grid .correct,.grid .known{background:#d7f5df;border-color:#5fb879;color:#12582b}.option.bad,.grid .wrong,.grid .repeat{background:#fee2e2;border-color:#e58383;color:#8b2222}.option.selected,.grid .answered{background:#e6f0ff;border-color:#76a9ed}.controls{margin-top:18px}.number-panel h3{margin:0 0 14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(45px,1fr));gap:7px}.grid button{padding:9px 0;border:1px solid #d2dae4;background:#f3f6fa;color:#213b55}.grid button.current{outline:3px solid #1671b2;outline-offset:1px}.notice{color:#9b5d08}@media(max-width:640px){header{padding:17px}.wrap{margin:13px auto}.toolbar,.card,.number-panel{padding:14px}.toolbar label{width:auto}.grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}h2{font-size:1.13rem}}

/* Dr.Who visual identity: responsive site header */
.site-header{background:linear-gradient(115deg,#102843,#193c60 68%,#24496b);color:#fff;padding:16px max(18px,calc((100vw - 1000px)/2));box-shadow:0 4px 18px rgba(13,36,61,.12)}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.site-header .brand{display:flex;align-items:center;gap:16px;text-decoration:none;min-width:0;color:#fff}
.site-header .logo-frame{display:flex;align-items:center;justify-content:center;flex:none;background:#fff;border:1px solid rgba(255,255,255,.92);border-radius:14px;width:156px;height:70px;padding:10px 12px;box-shadow:0 6px 19px rgba(0,0,0,.14)}
.site-header .brand-logo{display:block;width:100%;height:100%;object-fit:contain}
.site-header .brand-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.site-header .brand-eyebrow{font-size:.8rem;letter-spacing:.045em;color:#cee4f6;font-weight:600}
.site-header .brand-name{font-size:1.2rem;line-height:1.2;font-weight:750;color:#fff}
.site-header nav{display:flex;gap:8px;flex-wrap:wrap}
.site-header nav a{padding:10px 15px;border-radius:11px;border:1px solid rgba(255,255,255,.3);font-weight:600;transition:background .18s,border-color .18s}
.site-header nav a:hover{background:rgba(255,255,255,.16)}
.site-header nav a.active{background:#fff;color:#163450;border-color:#fff}
@media(max-width:720px){.site-header{padding:14px 16px}.site-header .header-inner{align-items:flex-start}.site-header .brand{gap:11px;width:100%}.site-header .logo-frame{width:122px;height:56px;padding:7px 9px;border-radius:11px}.site-header .brand-name{font-size:1rem}.site-header .brand-eyebrow{font-size:.73rem}.site-header nav{width:100%}.site-header nav a{padding:9px 13px}}
@media(max-width:370px){.site-header .logo-frame{width:107px;height:51px}.site-header .brand-name{font-size:.91rem}}