/* Programmer's Picnic · Professional light blue UI */
:root{--bg:#f5faff;--paper:#fff;--ink:#12334e;--muted:#567186;--blue:#1265a3;--blue2:#0d84bd;--light:#e7f5ff;--border:#cde4f4;--shadow:0 12px 34px #164b7a11;--good:#177a55;--warn:#a8720b;--bad:#ad3847}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
a{color:#0a65a5}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}
:focus-visible{outline:3px solid #f5ac36;outline-offset:3px}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}
.sitebar{background:#fff;border-bottom:1px solid var(--border);position:relative;z-index:2}.sitebar .wrap{min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:10px 0}
.brand{font-weight:850;color:#0a497b;text-decoration:none;font-size:1.08rem;display:inline-flex;align-items:center;gap:8px}.brandmark{display:inline-grid;place-items:center;width:32px;height:32px;background:#d9f0ff;border:1px solid #acd3ed;border-radius:10px}
nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}nav a{padding:8px 12px;font-weight:650;font-size:.92rem;text-decoration:none;border-radius:9px}nav a:hover,nav a[aria-current=page]{background:#e8f5ff;color:#094979;text-decoration:none}
.hero{background:linear-gradient(118deg,#d7efff,#f4fbff 68%,#e6f6ff);border-bottom:1px solid var(--border);padding:43px 0 45px}.eyebrow{font-size:.78rem;font-weight:850;color:#176498;text-transform:uppercase;letter-spacing:.115em}
h1{font-size:clamp(2rem,5vw,3.65rem);line-height:1.15;letter-spacing:-.035em;margin:12px 0}h1 span{color:#096cb0}.lead{font-size:1.13rem;color:#365e79;max-width:790px;margin:0}
.buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.button{border:1px solid #bad8ec;background:#fff;color:#105984;font-weight:760;border-radius:11px;padding:10px 16px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.button:hover{text-decoration:none;filter:brightness(.974)}.button.primary{background:var(--blue);border-color:var(--blue);color:#fff}.button.small{font-size:.82rem;padding:6px 10px}.button.danger{color:#a2343f;background:#fff8f8;border-color:#e6bdc2}.button.outline{background:#eef8ff}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.section{padding:32px 0}.card{background:var(--paper);border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow);padding:25px;min-width:0;margin-bottom:18px}
.card h2{margin:0 0 13px;font-size:1.58rem;line-height:1.24;color:#0b4b7b}.card h3{margin:17px 0 6px;color:#164e76;font-size:1.1rem}.card p{margin:9px 0 13px}
.muted{color:var(--muted)}.smalltext{font-size:.86rem}.tag{display:inline-flex;padding:3px 11px;border-radius:25px;background:#e8f5ff;color:#186397;border:1px solid #c6e3f5;font-size:.82rem;font-weight:750}
.stat{padding:15px 17px;border:1px solid var(--border);background:#fbfdff;border-radius:13px}.stat strong{display:block;font-size:1.85rem;line-height:1.25;color:#0f659d}.stat span{font-size:.9rem;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.wide{grid-column:1/-1}
label{font-size:.89rem;font-weight:730;color:#244b68}input,select,textarea{width:100%;border:1px solid #bdd9ec;border-radius:10px;background:#fff;color:#17354d;padding:11px 13px;min-height:44px}textarea{resize:vertical;min-height:100px}input::placeholder,textarea::placeholder{color:#839bab}
.task-item{border:1px solid #d5e7f3;border-radius:13px;background:#fbfdff;padding:15px;display:flex;justify-content:space-between;gap:14px;align-items:center;margin:10px 0}
.task-copy{min-width:0;flex:1}.task-item h3{margin:0 0 4px;font-size:1.04rem;overflow-wrap:anywhere}.task-details{color:#587188;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.91rem}
.task-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:#55738a}.task-status{border:1px solid #e7d39c;border-radius:30px;padding:2px 9px;background:#fff9e5;color:#946300;font-weight:760}.task-status.working{border-color:#b9daf0;background:#e9f5ff;color:#1264a0}.task-status.done{border-color:#b2dfc9;background:#ecfff5;color:#177a55}
.task-actions{display:flex;gap:7px;flex-wrap:wrap}.empty-state{border:1px dashed #a7cce8;border-radius:13px;padding:22px;color:#54748c;background:#f8fcff;text-align:center}
.notice{border-left:4px solid #2792c7;background:#edf8ff;padding:13px 16px;border-radius:8px;color:#285576;margin:15px 0}.notice.warning{border-left-color:#d39a27;background:#fff8e6}
.api-line{display:flex;gap:9px;flex-wrap:wrap;align-items:end}.api-line .form-field{flex:1 1 300px}
.api-status{padding:11px 15px;background:#edf4fa;border:1px solid #d2e3ee;border-radius:10px;color:#42647d;font-size:.93rem;margin:13px 0}.api-status[data-state=ok]{background:#e8fbf0;color:#176945;border-color:#a4d6b9}.api-status[data-state=error]{background:#fff1f0;color:#a52a33;border-color:#e7b8b7}.api-status[data-state=checking]{background:#eaf6ff;color:#136397}
pre{margin:0;overflow-x:auto;white-space:pre;padding:18px;background:#102b42;color:#eff8ff;border-radius:0 0 12px 12px;font:14px/1.6 Consolas,monospace}code{font: .9em Consolas,Monaco,monospace}
.codebox{background:#102b42;border-radius:12px;overflow:hidden;margin:13px 0;border:1px solid #23465e}.codehead{color:#d5ecff;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 13px;border-bottom:1px solid #345068;font-size:.86rem}.codehead button{color:#154a74;background:#e6f6ff;border:0;border-radius:7px;padding:4px 10px;font-size:.82rem;font-weight:800}
.terminal{background:#102b42;color:#eaf9ff;border:1px solid #23465e;border-radius:11px;padding:14px;overflow:auto;white-space:pre-wrap;font:13px/1.6 Consolas,monospace;min-height:65px}
.course-layout{display:grid;grid-template-columns:minmax(0,1fr) 234px;gap:20px;align-items:start}.course-toc{position:sticky;top:15px}.course-toc a{display:block;margin:7px 0;text-decoration:none}.course-toc a:hover{text-decoration:underline}.course-chapter{scroll-margin-top:20px}
.course-chapter ul,.course-chapter ol{padding-left:23px}.course-chapter li{margin:7px 0}.course-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid var(--border);margin-top:22px;padding-top:15px}
.exercise{background:#f0f8ff;border:1px solid #c4dff1;border-radius:11px;padding:15px;margin:14px 0}details{background:#fafdff;border:1px solid #cce2f2;border-radius:9px;padding:9px 14px;margin:10px 0}summary{cursor:pointer;font-weight:760;color:#165a8b}
progress{width:100%;height:14px;accent-color:#1265a3}footer{background:#e4f3ff;border-top:1px solid var(--border);padding:26px 0;text-align:center;font-size:.9rem;color:#436078}
@media(max-width:820px){.grid,.grid.two,.form-grid,.course-layout{grid-template-columns:1fr}.course-toc{position:static}.hero{padding:34px 0}.task-item{align-items:stretch;flex-direction:column}.sitebar nav{gap:2px}}@media(max-width:480px){.card{padding:17px}.sitebar .wrap{padding:10px 0}nav a{padding:6px 8px}.buttons{align-items:stretch}.task-actions{width:100%}}