:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#223b38;background:#f4f2eb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1120px;margin:auto;padding:60px 32px}header{max-width:760px;margin-bottom:54px}h1{font-size:clamp(48px,8vw,78px);letter-spacing:-.055em;line-height:1.08;margin:18px 0 24px}h1 span{color:#d6764f}header p{font-size:clamp(22px,3vw,30px);line-height:1.5;margin:0 0 24px}#lessons{min-width:0}.lesson{background:#fffefa;border:1px solid #dedfd4;border-radius:24px;padding:28px;box-shadow:0 7px 24px #243b3805}.rule{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start}.rule .board-wrap{grid-column:2;grid-row:1/3}h2{font-size:25px;letter-spacing:-.025em;line-height:1.25;margin:12px 0}.description{font-size:18px;line-height:1.55;color:#5b6a64;margin:0 0 22px}.board-wrap{min-width:0}svg{width:100%;height:auto;display:block;background:#f1f5ef;border-radius:17px;touch-action:none;user-select:none;-webkit-user-select:none}svg .grid{stroke:#dfe7dc;stroke-width:1}svg .bridge{stroke:#416c60;stroke-width:7;stroke-linecap:round;pointer-events:none}svg .selected{stroke:#dc784e}svg .ghost{stroke:#dc784e;stroke-width:6;stroke-linecap:round;stroke-dasharray:9 7;pointer-events:none}svg .node circle{fill:#fffefa;stroke:#456c60;stroke-width:2.5}svg .node text{fill:#243d36;font-size:23px;font-weight:650;text-anchor:middle;dominant-baseline:central;pointer-events:none}svg .node.valid circle{stroke:#d6764f;stroke-width:5;fill:#fff1d9}svg .node.done circle{fill:#dce9d8}.status{font-size:16px;line-height:1.4;min-height:46px;margin:15px 0 8px;color:#536b61}.status.success{color:#2c7157;font-weight:650}button{font:inherit;font-weight:600;color:#31584d;background:transparent;border:1px solid #c4d0c4;border-radius:10px;padding:9px 16px;cursor:pointer}button:hover{background:#eaf0e6}button:focus-visible,svg:focus-visible{outline:3px solid #d6764f;outline-offset:4px}footer{font-size:17px;line-height:1.6;color:#64736b;max-width:700px;margin:38px 0 0}@media(max-width:700px){main{padding:34px 18px}header{margin-bottom:32px}#lessons{grid-template-columns:1fr;gap:18px}.lesson{padding:22px}.rule{display:block}.description{font-size:18px}h2{font-size:24px}}

[hidden]{display:none!important}.rule h2{margin-top:0}.navigation{display:flex;justify-content:space-between;gap:16px;margin-top:22px;border-top:1px solid #e1e5da;padding-top:22px}button:disabled{opacity:.4;cursor:default}button:disabled:hover{background:transparent}#next{background:#31584d;color:#fffefa;border-color:#31584d}#next:hover{background:#24483e}#pending{max-width:680px}#pending p{font-size:19px;line-height:1.6;color:#5b6a64}@media(max-width:420px){.navigation{gap:10px}button{padding:11px 13px;font-size:16px}}

.counter{display:block;font-size:16px;font-weight:650;color:#6c7b70;margin-bottom:12px}.rule .board-wrap{grid-row:1/4}.rule h2{margin-bottom:12px}

.navigation{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.navigation button{min-width:0}#skip-tutorial{justify-self:center;border-color:transparent;text-decoration:underline;text-underline-offset:3px;font-size:16px;line-height:1.4;font-weight:500;max-width:300px}#skip-tutorial:hover{background:#edf1e7}@media(max-width:700px){.navigation{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#previous{grid-column:1;grid-row:1;justify-self:start}#next{grid-column:2;grid-row:1;justify-self:end}#skip-tutorial{grid-column:1/-1;grid-row:2;max-width:100%;padding:10px 4px}}

#previous{grid-column:1;grid-row:1}#skip-tutorial{grid-column:2;grid-row:1}#next{grid-column:3;grid-row:1}@media(max-width:700px){#next{grid-column:2}#skip-tutorial{grid-column:1/-1;grid-row:2}}
.navigation{grid-template-columns:minmax(110px,1fr) minmax(0,2fr) minmax(110px,1fr)}#previous{justify-self:start}#next{justify-self:end}@media(max-width:700px){.navigation{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

.level-navigation{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid #e1e5da;margin:22px 0;padding-top:22px}#level-next{background:#31584d;color:#fffefa}#finished p{font-size:19px;line-height:1.6}#finished button{margin:12px 12px 0 0}@media(max-width:700px){.level-navigation button{flex:1 1 130px}}

.level-navigation{margin-bottom:0}

header:has(#tutorial-intro[hidden]){margin-bottom:30px}header:has(#tutorial-intro[hidden]) h1{margin-bottom:0}

.level-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px}.level-navigation button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}#restart-level{justify-self:start}#level-progress{justify-self:center;font-size:17px;font-variant-numeric:tabular-nums;color:#536b61}#level-next{justify-self:end}@media(max-width:420px){.level-navigation{gap:8px}.level-navigation button{padding:10px 8px;font-size:16px}}