.hanoi-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:650px;margin:26px auto}.hanoi-peg{padding:12px 5px;border:2px solid transparent;border-radius:20px;background:#f3f5ee;color:#173d3b;min-width:0;cursor:pointer}.hanoi-peg:hover{background:#e6eee1}.hanoi-peg[aria-pressed=true]{border-color:#197762;box-shadow:0 0 0 3px #19776220}.hanoi-peg:focus-visible{outline:3px solid #c18455;outline-offset:3px}.hanoi-tower{display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;position:relative;height:230px;border-bottom:10px solid #ad8963;border-radius:7px;gap:3px;padding-bottom:5px}.hanoi-tower:before{content:'';position:absolute;width:8px;height:91%;background:#b79772;border-radius:8px;bottom:0;z-index:0}.hanoi-disk{display:block;border-radius:8px;box-shadow:inset 0 -3px #0002,0 2px 3px #0001;min-height:24px;line-height:24px;color:white;font-weight:700;position:relative;z-index:1;text-align:center}.hanoi-peg-label{display:block;margin-top:16px;font-weight:700}.hanoi-mission{font-size:20px;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums;color:#245e51}.hanoi-instruction{text-align:center;font-size:14px;color:#536a65}.hanoi-stage+.hanoi-instruction{min-height:3em}.hanoi-stage button{touch-action:manipulation}.hanoi-stage *{box-sizing:border-box}@media(max-width:600px){.hanoi-stage{gap:5px;margin:18px auto}.hanoi-tower{height:195px}.hanoi-disk{min-height:21px;line-height:21px;font-size:12px}.hanoi-peg{padding:8px 2px}.hanoi-peg-label{font-size:12px}.hanoi-mission{font-size:18px}}

:is(#board,[data-board-slot="board"]).hanoi-board{display:block;width:100%;min-width:0}.learn-button{display:block;width:100%;min-height:44px;padding:12px;margin-top:14px;border:1px solid #cedbc6;border-radius:12px;background:#eef2e5;color:#245e51;font:inherit;cursor:pointer}.lesson .hanoi-stage{gap:8px}.lesson .hanoi-stage button{min-height:55px;border-radius:12px;border:1px solid #bfcfbc;background:#f3f7ed;cursor:pointer}

.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1000px){.catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}