.focus-shell{width:min(1500px,calc(100% - clamp(28px,5vw,72px)));margin:0 auto;padding:24px 0 72px}.focus-breadcrumbs{font-size:13px;color:#64748b;margin:0 0 15px}.focus-breadcrumbs a{color:#1769ff}.focus-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:22px;align-items:center;padding:clamp(26px,4vw,48px);border:1px solid #cfe0ff;border-radius:28px;background:linear-gradient(135deg,#eff6ff,#f8fafc 50%,#f5f3ff)}.focus-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.04;margin:8px 0 12px;color:#0f172a}.focus-hero p{font-size:17px;line-height:1.7;color:#475569;max-width:850px}.focus-eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:#fff;color:#1d4ed8;font-size:12px;font-weight:800;letter-spacing:.03em}.focus-hero-panel{display:grid;gap:10px}.focus-hero-panel div{padding:16px;border:1px solid #dbeafe;background:rgba(255,255,255,.84);border-radius:17px}.focus-hero-panel span{display:block;color:#64748b;font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.07em}.focus-hero-panel strong{display:block;margin-top:5px;font-size:18px;color:#0f172a}.focus-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;margin-top:18px}.focus-card,.focus-side-card,.focus-content,.focus-related{background:#fff;border:1px solid #dbe4f0;border-radius:24px;box-shadow:0 14px 35px rgba(15,23,42,.05)}.focus-card{overflow:hidden}.focus-card-head{padding:20px 22px;border-bottom:1px solid #dbe4f0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.focus-card-head h2{font-size:25px;margin:0 0 6px}.focus-card-head p{margin:0;color:#64748b}.focus-status{padding:7px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:800;font-size:11px;white-space:nowrap}.focus-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 18px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.focus-options label{display:grid;gap:5px;color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.focus-options select{width:100%;padding:10px 11px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;color:#0f172a;font-size:14px}.focus-fixed-setting{display:grid;align-content:center;gap:5px;padding:9px 11px;border:1px solid #dbe4f0;border-radius:11px;background:#fff;min-height:58px}.focus-fixed-setting span{color:#64748b;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.focus-fixed-setting strong{color:#0f172a;font-size:14px;line-height:1.35}.focus-options-fixed{align-items:stretch}.focus-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 18px}.focus-metric{padding:11px 8px;text-align:center;border-radius:13px;background:#f8fafc;border:1px solid #e2e8f0}.focus-metric span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:800}.focus-metric strong{display:block;margin-top:3px;font-size:21px;color:#1769ff}.focus-stage-wrap{padding:0 18px}.focus-stage{height:calc(5.25em + 40px);overflow:hidden;overflow-wrap:normal;word-break:normal;position:relative;padding:18px;border:1px solid #dbe4f0;border-radius:17px;background:#fbfdff;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(20px,2vw,27px);line-height:1.75;letter-spacing:.025em;color:#51627a;white-space:pre-wrap}.focus-stage .char{color:inherit;background:transparent;text-decoration:none}.focus-stage.no-highlight .char.done,.focus-stage.no-highlight .char.wrong{color:inherit;background:transparent}.focus-stage.no-highlight .char.current{border-left:2px solid #1769ff;margin-left:-1px}.focus-stage.no-look .char.done{color:#94a3b8}.focus-stage.no-look .char.wrong{text-decoration:underline dotted #ef4444;text-underline-offset:5px}.focus-stage.no-look .char.current{background:#eaf2ff;color:#0f172a;border-radius:3px}.focus-progress{height:6px;background:#e2e8f0;margin-top:12px;border-radius:999px;overflow:hidden}.focus-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#10b981,#1769ff)}.focus-message{min-height:24px;padding:10px 18px 0;text-align:center;color:#1d4ed8;font-weight:800;font-size:13px}.focus-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;padding:12px 18px 20px}.focus-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 16px;border:1px solid #1769ff;border-radius:12px;background:#1769ff;color:#fff!important;font-weight:800;cursor:pointer;text-decoration:none}.focus-button.secondary{background:#fff;color:#1769ff!important;border-color:#bfd4ff}.focus-capture{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:.01!important}.focus-results{padding:24px;text-align:center}.focus-results[hidden]{display:none}.focus-result-badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:#ecfdf5;color:#047857;font-weight:800;font-size:12px}.focus-results h2{font-size:32px;margin:10px 0 6px}.focus-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.focus-result-grid div{padding:14px;border:1px solid #dbe4f0;border-radius:14px;background:#f8fafc}.focus-result-grid span{display:block;font-size:9px;text-transform:uppercase;color:#64748b;font-weight:800}.focus-result-grid strong{display:block;font-size:23px;color:#1769ff;margin-top:4px}.focus-side{display:grid;gap:12px;align-content:start}.focus-side-card{padding:18px}.focus-side-card h2{font-size:18px;margin:0 0 9px}.focus-side-card p,.focus-side-card li{color:#64748b;line-height:1.6;font-size:14px}.focus-side-card ul{padding-left:19px;margin:8px 0}.focus-content{padding:clamp(22px,3vw,34px);margin-top:18px}.focus-content h2{font-size:28px;margin:0 0 10px}.focus-content h3{font-size:20px;margin:22px 0 7px}.focus-content p,.focus-content li{color:#475569;line-height:1.75}.focus-content a{color:#1769ff;font-weight:700}.focus-callout{margin:18px 0;padding:17px 19px;border-radius:16px;background:#eff6ff;border:1px solid #bfdbfe}.focus-related{padding:24px;margin-top:18px}.focus-related h2{margin:0 0 14px}.focus-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.focus-related-grid a{display:grid;gap:6px;padding:16px;border-radius:15px;border:1px solid #dbe4f0;background:#f8fafc;text-decoration:none}.focus-related-grid strong{color:#0f172a}.focus-related-grid span{color:#64748b;line-height:1.5;font-size:13px}@media(max-width:900px){.focus-hero,.focus-layout{grid-template-columns:1fr}.focus-side{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-options{grid-template-columns:1fr 1fr}.focus-related-grid{grid-template-columns:1fr 1fr}}@media(max-width:620px){.focus-shell{width:min(100% - 20px,1500px);padding-top:14px}.focus-hero{padding:22px;border-radius:21px}.focus-hero h1{font-size:34px}.focus-side,.focus-options,.focus-related-grid{grid-template-columns:1fr}.focus-metrics,.focus-result-grid{grid-template-columns:repeat(2,1fr)}.focus-stage{height:calc(5.25em + 32px);font-size:19px;padding:14px}.focus-card-head{display:block}.focus-status{display:inline-flex;margin-top:10px}}
html[data-theme="dark"] .focus-card,html[data-theme="dark"] .focus-side-card,html[data-theme="dark"] .focus-content,html[data-theme="dark"] .focus-related{background:#111827;border-color:#334155}html[data-theme="dark"] .focus-hero{background:linear-gradient(135deg,#111827,#172033,#211b35);border-color:#334155}html[data-theme="dark"] .focus-hero h1,html[data-theme="dark"] .focus-hero-panel strong,html[data-theme="dark"] .focus-card-head h2,html[data-theme="dark"] .focus-content h2,html[data-theme="dark"] .focus-content h3,html[data-theme="dark"] .focus-related-grid strong{color:#f8fafc}html[data-theme="dark"] .focus-stage,html[data-theme="dark"] .focus-options select,html[data-theme="dark"] .focus-fixed-setting{background:#0f172a;color:#cbd5e1;border-color:#334155}html[data-theme="dark"] .focus-fixed-setting strong{color:#f8fafc}html[data-theme="dark"] .focus-options,html[data-theme="dark"] .focus-metric,html[data-theme="dark"] .focus-result-grid div,html[data-theme="dark"] .focus-related-grid a{background:#172033;border-color:#334155}

/* v17.10.20: compact focused-practice headers and faster access to the activity */
.focus-hero-compact{grid-template-columns:1fr;padding:clamp(20px,3vw,34px);gap:10px}
.focus-hero-compact>div:first-child{max-width:1080px}
body[data-focus-mode] .focus-layout{margin-top:12px}
.programmers-practice-page .focus-content{margin-top:12px}
@media(max-width:620px){
  body[data-focus-mode] .focus-shell,.programmers-practice-page .focus-shell{padding-top:10px}
  .focus-hero-compact{padding:17px 18px;border-radius:18px}
  .focus-hero-compact h1{font-size:clamp(28px,9vw,34px);margin-top:6px;margin-bottom:8px}
  .focus-hero-compact p{font-size:15px;line-height:1.55}
  body[data-focus-mode] .focus-layout{margin-top:10px}
  body[data-focus-mode] .focus-card-head{padding:16px 17px}
}