.task17-page { --wb-blue:#4c6696; --wb-line:#dce3ee; --wb-muted:#596579; }
.task17-page .wb-hero h1 { font-size:clamp(36px,4vw,56px); letter-spacing:-.045em; }
.wb-facts { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:28px; color:var(--wb-muted); font-size:13px; }
.wb-facts b { display:block; color:#171b22; font-size:28px; letter-spacing:-.04em; }
.task17-page .wb-cover { background:#edf1f7; min-height:390px; }
.task17-page .wb-cover img { width:210px; height:auto; transform:rotate(4deg); border-radius:2px; box-shadow:0 18px 35px #23324720; }
.wb-project-note { font-size:14px; }
.wb-how { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; padding:48px 0 64px; }
.wb-how h2 { margin-top:12px; }
.wb-how ol { list-style:none; counter-reset:how; padding:0; margin:0; }
.wb-how li { counter-increment:how; position:relative; padding:0 0 24px 46px; }
.wb-how li::before { content:counter(how); position:absolute; left:0; top:0; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#edf1f7; color:var(--wb-blue); font-size:13px; font-weight:700; }
.wb-how p { color:var(--wb-muted); margin-top:6px; font-size:15px; }
.wb { display:grid; grid-template-columns:260px minmax(0,1fr); gap:40px; align-items:start; border-top:1px solid var(--wb-line); padding-top:32px; }
.wb>noscript { grid-column:1/-1; }
.wb-sidebar { position:sticky; top:90px; max-height:calc(100dvh - 110px); overflow-y:auto; scrollbar-width:thin; padding:0 6px 8px 0; }
.wb-navigation { background:#f3f5f9; border:1px solid var(--wb-line); border-radius:20px; padding:20px 14px; }
.wb-navigation>summary { cursor:pointer; font-size:15px; font-weight:700; padding:0 6px 12px; }
.wb-progress { padding:0 6px 16px; }
.wb-progress>div { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; margin-bottom:8px; }
.wb-progress progress { width:100%; height:5px; display:block; accent-color:var(--wb-blue); border:0; border-radius:8px; }
.wb-progress progress::-webkit-progress-bar { background:#dce3ee; border-radius:8px; }
.wb-progress progress::-webkit-progress-value { background:var(--wb-blue); border-radius:8px; }
.wb-navigation nav { display:grid; gap:4px; }
.wb-navigation nav a { display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; padding:11px 8px; text-decoration:none; font-size:13px; line-height:1.4; border-radius:10px; }
.wb-navigation nav a:hover { background:#e4eaf4; }
.wb-navigation nav a[aria-current=true] { background:#20252e; color:#fff; }
.wb-nav-number { align-self:start; font-size:11px; opacity:.7; padding-top:2px; }
.wb-navigation nav small { display:block; font-size:11px; opacity:.75; margin-top:3px; }
.wb-nav-count { font-size:10px; font-variant-numeric:tabular-nums; }
.wb-side-actions { display:grid; gap:3px; border-top:1px solid var(--wb-line); padding-top:12px; margin-top:14px; }
.wb-side-actions a,.wb-side-actions button { color:var(--wb-muted); text-align:left; background:none; border:0; font:inherit; font-size:12px; padding:9px 7px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.wb-save-note,.wb-save-status { font-size:12px; color:var(--wb-muted); margin:12px 8px!important; }
.wb-save-status:empty { display:none; }
.wb-content,.wb-content>* { min-width:0; }
.wb-chapter { scroll-margin-top:95px; padding-bottom:32px; }
.wb [hidden],.task17-page [hidden] { display:none!important; }
.wb .bhead { display:flex; align-items:flex-start; gap:16px; margin:4px 0 20px; }
.wb .bnum { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; background:#20252e; color:#fff; font-weight:700; font-size:24px; }
.wb .bkicker { text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--wb-blue); font-size:11px; margin:0 0 5px; }
.wb h2 { font-size:clamp(24px,2.4vw,32px); line-height:1.22; letter-spacing:-.025em; }
.wb h3 { margin:30px 0 16px; font-size:21px; line-height:1.4; }
.wb h3>span { display:inline-block; font-size:13px; font-weight:600; background:#edf1f7; border-radius:8px; padding:3px 8px; margin-right:8px; vertical-align:middle; }
.wb .lead { font-size:16px; color:var(--wb-muted); margin-bottom:24px; }
.wb p { margin:10px 0; }
.wb .box,.wb .ex { padding:22px; border:1px solid var(--wb-line); border-radius:16px; margin:20px 0; overflow-wrap:break-word; }
.wb .ex { border-left:4px solid #7890c0; background:#fff; }
.wb .box.rule { background:#eff4fb; }
.wb .box.concl { background:#e5edf9; }
.wb .box.idea { background:#f1f6dd; }
.wb .box.trap { background:#fff5ef; border-color:#ead7ca; }
.wb .box.phys { background:#fff; }
.wb .boxt,.wb .ext { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:16px; font-weight:700; margin-bottom:14px; }
.wb .pill { font-size:10px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; border:1px solid #c7d2e4; background:#fff; border-radius:6px; color:#3c5277; padding:3px 7px; }
.wb .pill.dark { background:#20252e; color:#fff; border-color:#20252e; }
.wb .boxb,.wb .exc,.wb .exs,.wb .tb,.wb .vt { font-size:16px; line-height:1.8; min-width:0; }
.wb .exs { border-top:1px dashed var(--wb-line); margin-top:16px; padding-top:14px; }
.wb .steps { padding-left:24px; }
.wb .steps li { padding-left:4px; margin:10px 0; }
.wb .cards2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wb .cards2>.box { margin:0; }
.wb .small,.wb .instr { color:var(--wb-muted); font-size:14px; }
.wb .instr { margin:24px 0 10px; }
.wb .fig,.wb .figrow { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:20px 0; }
.wb svg.plot { max-width:100%; height:auto; font-family:Onest,Arial,sans-serif; }
.wb svg .ax { font-size:11px; font-style:italic; fill:#111; }
.wb svg .tk { font-size:10.5px; fill:#333; }
.wb svg .lab { font-size:12px; font-weight:600; fill:#111; }
.wb .task { display:grid; grid-template-columns:45px minmax(0,1fr); gap:14px; border:1px solid var(--wb-line); border-radius:16px; padding:22px 20px; margin:14px 0; scroll-margin-top:100px; background:#fff; }
.wb .task:has(input[data-done]:checked) { border-color:#8da68a; }
.wb .tn { font-variant-numeric:tabular-nums; font-size:14px; font-weight:700; color:var(--wb-blue); padding-top:4px; }
.wb .tag { display:inline-block; background:#edf3dc; border-radius:5px; padding:1px 6px; font-size:12px; }
.wb-task-controls { margin-top:18px; }
.wb-task-controls details { border-top:1px solid var(--wb-line); padding:0; }
.wb-task-controls summary { min-height:46px; padding:11px 0; font-size:14px; cursor:pointer; font-weight:600; }
.wb-answer-body { background:#f3f6fb; padding:16px; border-radius:10px; margin-bottom:14px; font-size:15px; overflow-wrap:break-word; }
.wb-solution { padding-top:14px; margin-top:14px; border-top:1px solid var(--wb-line); }
.wb-draft label { font-size:13px; color:var(--wb-muted); display:block; margin-bottom:7px; }
.wb-draft textarea { width:100%; max-width:100%; min-height:120px; resize:vertical; display:block; padding:12px; margin:0 0 14px; border:1px solid #aebbd0; border-radius:9px; background:#fff; font:400 16px/1.6 Onest,Arial,sans-serif; color:#18202d; }
.wb-done { display:flex; align-items:center; gap:10px; min-height:46px; cursor:pointer; font-size:13px; color:#3e5741; }
.wb-done input { margin:0; width:19px; height:19px; accent-color:#526f50; flex:none; }
.wb .variant { margin:24px 0; padding:22px; border:1px solid var(--wb-line); border-radius:16px; }
.wb .vh { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:18px; font-weight:700; }
.wb .vh span { color:var(--wb-muted); font-size:12px; font-weight:400; }
.wb .vt { padding:20px 0; scroll-margin-top:100px; }
.wb .vt+.vt { border-top:1px solid var(--wb-line); }
.wb .cl { padding-left:22px; }
.wb .cl li { margin:8px 0; }
.wb math { font-size:1.05em; font-family:Cambria Math,STIX Two Math,serif; }
.wb-formula { display:inline-block; max-width:100%; overflow-x:auto; overflow-y:hidden; vertical-align:middle; padding:4px 0; }
.wb-formula math { min-width:max-content; }
.wb .katex-display>.wb-formula { display:block; }
.wb .katex-display { display:block; max-width:100%; overflow-x:auto; overflow-y:hidden; padding:10px 0; margin:10px 0; }
.wb .katex-display math { min-width:max-content; margin:auto; }
.wb .ft { width:100%; table-layout:fixed; border-collapse:collapse; }
.wb .ft td { padding:12px 10px; border-bottom:1px solid var(--wb-line); font-size:14px; overflow-wrap:anywhere; }
.wb .ft td:first-child { width:50%; }
.wb-formulas { border:1px solid var(--wb-line); border-radius:14px; padding:0 18px; margin-bottom:24px; }
.wb-formulas>summary { padding:15px 0; cursor:pointer; font-weight:600; font-size:15px; }
.wb-formulas .phys { padding:0; border:0; margin:0 0 16px; }
.wb-formulas .boxt { display:none; }
.wb-intro { scroll-margin-top:100px; }
.wb-intro>.box { margin-top:0; }
.wb-next { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--wb-line); padding:24px 0; margin-top:28px; font-size:14px; }
.wb-next .lr-button { text-align:center; }
.wb-download { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-top:24px; }
.wb-download p { color:var(--wb-muted); font-size:15px; }
.wb-reset-dialog { width:min(480px,calc(100% - 32px)); padding:28px; border:1px solid var(--wb-line); border-radius:20px; color:#171b22; }
.wb-reset-dialog::backdrop { background:#131b2b80; }
.wb-reset-dialog h2 { font-size:25px; margin-bottom:15px; }
.task17-page :focus-visible { outline:3px solid #7890c0; outline-offset:4px; }
@media(max-width:1000px) {
  .wb { grid-template-columns:220px minmax(0,1fr); gap:24px; }
  .wb .cards2 { grid-template-columns:1fr; }
  .wb .task { grid-template-columns:1fr; gap:8px; }
}
@media(max-width:800px) {
  .task17-page .wb-hero { grid-template-columns:1fr; }
  .task17-page .wb-cover { display:none; }
  .wb-how { grid-template-columns:1fr; gap:26px; padding:26px 0; }
  .wb-how h2 br { display:none; }
  .wb { grid-template-columns:minmax(0,1fr); gap:26px; padding-top:20px; }
  .wb-sidebar { position:static; max-height:none; padding:0; }
  .wb-navigation nav { grid-template-columns:1fr 1fr; }
  .wb-navigation nav a { padding:12px; }
  .wb-side-actions { grid-template-columns:1fr 1fr; }
  .wb-download { grid-template-columns:1fr; gap:18px; }
  .wb-download .lr-button { justify-self:start; }
}
@media(max-width:480px) {
  .task17-page .wb-hero h1 { font-size:36px; }
  .wb-navigation nav { grid-template-columns:1fr; }
  .wb .bhead { gap:12px; }
  .wb .bnum { width:38px; height:38px; font-size:20px; border-radius:10px; }
  .wb .box,.wb .ex,.wb .variant,.wb .task { padding:18px 16px; }
  .wb .boxb,.wb .exc,.wb .exs,.wb .tb,.wb .vt { font-size:15px; }
  .wb .ft,.wb .ft tbody,.wb .ft tr,.wb .ft td { display:block; width:100%!important; }
  .wb .ft td:first-child { border:0; padding-bottom:0; }
  .wb .ft td:last-child { padding-top:6px; }
  .wb-facts { gap:14px 20px; font-size:12px; }
  .wb-facts b { font-size:25px; }
}
@media print {
  .wb-sidebar,.wb-task-controls,.wb-next,.wb-how,.wb-project-note,.learning-share { display:none!important; }
  .wb,.wb-content { display:block; }
  .wb-chapter[hidden],.wb-intro[hidden] { display:block!important; }
  .wb .task,.wb .variant,.wb .ex { break-inside:avoid; }
}