.cd-puzzle{--blue:#4577BE;--blue-deep:#2f5a99;--ink:#32373c;--ink-soft:#444;--mist:#eff7f9;
  --line:#dde8f0;font-family:'Fira Sans','Fira Fallback',system-ui,Arial,sans-serif;color:var(--ink-soft);
  width:100%;max-width:860px;margin-left:auto;margin-right:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.cd-puzzle *{box-sizing:border-box}
.cdp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.cdp-h1{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0}
.cdp-prog{font-size:13px;color:#6b7682;font-weight:500}
.cdp-main{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.cdp-boardwrap{flex:none}
.cdp-board{--cdp-bw:min(440px,86vw);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);   
  width:var(--cdp-bw);aspect-ratio:1;border:1px solid #c7d4e3;border-radius:6px;overflow:hidden;
  touch-action:none}
.cdp-board i.sq{position:relative;display:flex;align-items:center;justify-content:center;font-style:normal;
  cursor:pointer;user-select:none;-webkit-user-select:none;font-size:calc(var(--cdp-bw) / 8 * .88);line-height:1}
.cdp-board i.lt{background:#ffffff}.cdp-board i.dk{background:#4577BE}   
.cdp-board .w{color:#fff;-webkit-text-stroke:.043em #14161b;text-shadow:0 1px 1px rgba(20,24,28,.45);paint-order:stroke fill}
.cdp-board .b{color:#000;-webkit-text-stroke:.02em rgba(255,255,255,.5);text-shadow:0 1px 1px rgba(255,255,255,.2);paint-order:stroke fill}
.cdp-board i.last{box-shadow:inset 0 0 0 99px rgba(246,196,83,.30)}   
.cdp-board i.sel{box-shadow:inset 0 0 0 99px rgba(246,196,83,.45)}    
.cdp-board i.good{box-shadow:inset 0 0 0 99px rgba(60,160,90,.5)}
.cdp-board i.bad{box-shadow:inset 0 0 0 99px rgba(206,71,71,.5)}
.cdp-board i.sq.drag{opacity:.3}
.cdp-board i.sq.hint::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;
  background:rgba(46,66,99,.32);pointer-events:none}
.cdp-board i.sq.hint.hascap::after{width:84%;height:84%;background:transparent;
  border:5px solid rgba(46,66,99,.28)}
.cdp-drag-ghost{position:fixed;z-index:9999;pointer-events:none;display:flex;align-items:center;
  justify-content:center;line-height:1}
.cdp-drag-ghost .w{color:#fff;-webkit-text-stroke:.043em #14161b;text-shadow:0 2px 5px rgba(20,24,28,.55);paint-order:stroke fill}
.cdp-drag-ghost .b{color:#000;-webkit-text-stroke:.02em rgba(255,255,255,.5);text-shadow:0 2px 5px rgba(20,24,28,.4);paint-order:stroke fill}
.cdp-main{align-items:stretch}
.cdp-side{flex:1;min-width:260px;max-width:560px;display:flex;flex-direction:column;gap:12px}
.cdp-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cdp-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.cdp-elo{background:var(--mist);color:var(--blue-deep);border:1px solid #d4e6ef}

.cd-puzzle[data-mode="range"] .cdp-elo{display:none}
.cdp-pool{background:#f4f7fb;color:#6b7682;border:1px solid #e4ebf3}
.cdp-moves{font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;line-height:1.75}
.cdp-moves .cdp-mlabel{font-size:11px;font-weight:600;color:#6b7682;text-transform:uppercase;
  letter-spacing:.04em;margin-right:6px}
.cdp-moves .mvn{color:#8a96a0}
.cdp-moves .mv{font-weight:600;cursor:pointer;border-radius:4px;padding:1px 3px}
.cdp-moves .mv:hover{background:#eef3f9}
.cdp-moves .mv.on{background:var(--blue);color:#fff}
.cdp-moves .cdp-mlabel{cursor:pointer}
.cdp-moves .cdp-mlabel.on{color:var(--blue-deep)}
.cdp-board.reviewing{outline:2px solid var(--blue);outline-offset:-1px}
.cdp-turn{font-size:14.5px;color:var(--ink);font-weight:500;min-height:20px}
.cdp-status{font-size:14px;font-weight:600;min-height:20px}
.cdp-ok{color:#2e8b57}.cdp-no{color:#c0392b}
.cdp-reveal{font-size:13.5px;color:#6b7682}
.cdp-reveal:empty{display:none}
.cdp-reveal b{color:var(--blue-deep)}

.cdp-cd{font-size:13px;color:#6b7682;cursor:pointer;user-select:none}
.cdp-cd b{color:var(--blue-deep);font-weight:600}
.cdp-cd .cdp-cd-hint{color:#9aa4ad;font-size:.9em}
.cdp-slider{display:flex;align-items:center;gap:10px;font-size:13px;color:#6b7682}
.cdp-slider[hidden]{display:none}
.cdp-slider input[type=range]{flex:1;min-width:0;accent-color:var(--blue)}
.cdp-slider b{color:var(--blue-deep);min-width:96px;font-weight:600}
.cdp-hwrap{border-top:1px dashed var(--line);padding-top:11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.cdp-hlbl{font-size:12.5px;color:#6b7682;font-weight:600}
.cdp-hbtn{border:1px solid var(--line);background:#fff;color:var(--blue-deep);border-radius:7px;
  padding:8px 13px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;min-height:38px}
.cdp-hbtn:hover{border-color:var(--blue)}.cdp-hbtn.on{background:var(--mist);border-color:var(--blue)}
.cdp-htext{font-size:13.5px;color:var(--ink);min-height:18px;font-style:italic}
.cdp-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cdp-btn{background:var(--blue);color:#fff;border:none;border-radius:8px;padding:11px 16px;font-weight:600;
  font-size:14px;cursor:pointer;font-family:inherit}
.cdp-btn:hover{background:var(--blue-deep)}
.cdp-btn.ghost{background:#fff;color:var(--blue-deep);border:1.5px solid var(--line)}
.cdp-btn.ghost:hover{border-color:var(--blue);background:var(--mist)}
.cdp-prev[disabled]{display:none}
@media(max-width:560px){
  .cd-puzzle{padding:14px 12px;border-radius:10px}
  .cdp-head{margin-bottom:10px;flex-wrap:wrap;row-gap:4px}
  .cdp-h1{font-size:1.05rem;line-height:1.25}
  .cdp-prog{font-size:12.5px}
  .cdp-board{--cdp-bw:min(484px,calc(100vw - 78px))}
  .cdp-side{min-width:0;max-width:none}
  .cdp-main{gap:14px}
  .cdp-slider input[type=range]{min-height:44px}
  .cdp-hbtn{padding:10px 14px;font-size:13px;min-height:44px}
  .cdp-actions{flex-direction:column}
  .cdp-actions .cdp-btn{width:100%;min-height:46px;padding:12px 16px}
  
  .cdp-actions .cdp-prev{min-height:42px;padding:10px 14px;font-size:13.5px}
  .cdp-moves{font-size:13.5px;line-height:1.7}
}
@media(max-width:380px){
  .cdp-h1{font-size:1rem}
  .cdp-board{--cdp-bw:min(484px,calc(100vw - 78px))}
}


.cd-related{max-width:860px;margin:36px auto 0;
  font-family:'Fira Sans','Fira Fallback',system-ui,-apple-system,Arial,sans-serif}
.cd-related-h{font-size:1.3rem;font-weight:800;color:#32373c;letter-spacing:-.01em;margin:0 0 4px}
.cd-related-sub{font-size:.92rem;color:#6b7682;margin:0 0 16px}
.cd-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cd-related a.cd-related-card{display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-decoration:none;background:#fff;border:1px solid #dde8f0;border-radius:10px;
  padding:14px 16px;color:#32373c;font-weight:600;font-size:.97rem;line-height:1.3;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,color .15s ease}
.cd-related a.cd-related-card::after{content:"\2192";color:#9db4d0;font-weight:700;font-size:1.05em;
  flex:none;transition:transform .15s ease,color .15s ease}
.cd-related a.cd-related-card:hover{transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(47,90,153,.12);border-color:#4577BE;color:#2f5a99}
.cd-related a.cd-related-card:hover::after{color:#4577BE;transform:translateX(3px)}
.cd-related a.cd-related-card.is-hub{background:#eff7f9;border-color:#d4e6ef;color:#2f5a99;font-weight:700}
.cd-related a.cd-related-card.is-easy{background:#f4f7fb;border-color:#e4ebf3}
.cd-related a.cd-related-card.is-hard{background:#fdf5ee;border-color:#f0d4b8;color:#6e4a1c}
.cd-related a.cd-related-card.is-hard:hover{border-color:#d4a017;color:#5a3a14}
.cd-related a.cd-related-card.is-hard::after{color:#d4a017}
@media(max-width:520px){.cd-related-grid{grid-template-columns:1fr}}


.cd-secgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.cd-secblock{border:1px solid #dde8f0;border-radius:12px;padding:15px 15px 13px;background:#fbfdff}
.cd-secblock>.cd-related-card{margin-bottom:11px}
.cd-subchips{display:flex;flex-wrap:wrap;gap:7px}
.cd-subchips a{display:inline-block;text-decoration:none;font-size:.84rem;font-weight:500;
  color:#3d566f;background:#f1f6fb;border:1px solid #e1e9f1;border-radius:999px;padding:4px 11px;
  line-height:1.3;transition:background .12s ease,border-color .12s ease,color .12s ease}
.cd-subchips a:hover{background:#e7f0f8;border-color:#4577BE;color:#2f5a99}
@media(max-width:560px){.cd-secgrid{grid-template-columns:1fr}}


.cd-trap{background:#fffaf0;border:1px solid #f2d68a;border-left:4px solid #d4a017;
  border-radius:8px;padding:18px 22px;margin:26px 0;font-family:'Fira Sans','Fira Fallback',system-ui,Arial,sans-serif}
.cd-trap h3{margin:0 0 8px;font-size:1.08rem;font-weight:700;color:#7a5a14;letter-spacing:-.005em}
.cd-trap p{margin:10px 0;line-height:1.55;color:#3d3214}
.cd-trap p.cd-trap-pgn{font-family:'Fira Mono','SFMono-Regular',Consolas,monospace;font-size:.92rem;
  background:rgba(255,255,255,.55);padding:8px 12px;border-radius:6px;line-height:1.45;color:#4a3a14}
.cd-trap p.cd-trap-pgn b{font-family:'Fira Sans','Fira Fallback',system-ui,Arial,sans-serif;margin-right:6px;color:#7a5a14}
.cd-trap p.cd-trap-cross{font-size:.92rem;color:#6b5a2f}
.cd-trap p.cd-trap-cross a{color:#4577BE;font-weight:600}
.cd-trap figure.cd-diagram{margin:14px auto;background:#fff}
@media(max-width:560px){.cd-trap{padding:14px 16px;margin:18px 0}.cd-trap p.cd-trap-pgn{font-size:.85rem}}


.cd-diagram{margin:18px auto;padding:8px;background:#fff;border:1px solid #dde8f0;border-radius:8px;
  display:block;text-align:center;font-family:'Fira Sans','Fira Fallback',system-ui,Arial,sans-serif}
.cd-diagram svg{display:block;margin:0 auto;width:100%;height:auto;max-width:100%;border-radius:4px}
.cd-diagram figcaption{font-size:.82rem;color:#6b7682;margin-top:6px;line-height:1.4;font-style:italic}
@media(max-width:560px){.cd-diagram{max-width:100%!important}}


.cd-glossary{font-family:'Fira Sans','Fira Fallback',system-ui,Arial,sans-serif;background:#f4f7fb;
  border:1px solid #dde8f0;border-radius:8px;padding:10px 14px;margin:0 0 22px;font-size:.92rem;color:#32373c}
.cd-glossary>summary{cursor:pointer;font-weight:600;color:#2f5a99;list-style:none;
  padding:2px 0;display:flex;align-items:center;gap:8px}
.cd-glossary>summary::-webkit-details-marker{display:none}
.cd-glossary>summary::before{content:"?";display:inline-flex;width:18px;height:18px;align-items:center;
  justify-content:center;background:#4577BE;color:#fff;border-radius:50%;font-size:.72rem;font-weight:800;flex:none}
.cd-glossary[open]>summary::before{content:"−";font-size:1rem}
.cd-glossary p{margin:8px 0 0;line-height:1.55}
.cd-glossary p b{color:#2f5a99;margin-right:4px}


.hub-card .solve-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;align-self:flex-start;
  background:#4577BE;color:#fff;font-weight:700;font-size:.92rem;padding:10px 16px;border-radius:8px;
  text-decoration:none;transition:background .15s ease,transform .15s ease}
.hub-card .solve-cta:hover{background:#2f5a99;transform:translateX(2px);text-decoration:none}


.card-grid{max-width:860px;margin-left:auto;margin-right:auto}
.sec-head{max-width:860px;margin-left:auto;margin-right:auto}


.page-hero{border-bottom:0}