.hanoi-lab{color:var(--ink,#17233c)}
.hanoi-lab .hn-instructions{padding:1rem 1.2rem;background:#eef6f4;border-left:4px solid #147e70;line-height:1.7}
.hanoi-lab .hn-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:1rem;margin:1.4rem 0}
.hanoi-lab .hn-toolbar label{font-weight:700;min-width:180px;flex:1}
.hanoi-lab .hn-toolbar select{margin-top:.4rem;min-height:46px}
.hanoi-lab .hn-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:1.2rem 0;scroll-margin-top:7rem}
.hanoi-lab .hn-metrics p{margin:0;padding:1rem;background:#f2f7fa;border:1px solid #d9e5eb;border-radius:.8rem;line-height:1.4;min-width:0}
.hanoi-lab .hn-metrics strong{display:block;font-size:1.7rem;color:#176d67;margin-top:.4rem;font-variant-numeric:tabular-nums}
.hanoi-lab .hn-metrics p:last-child strong{font-size:1.1rem;overflow-wrap:anywhere}
.hanoi-lab .hn-board{--n:3;position:relative;height:calc(138px + var(--n)*28px);min-height:240px;background:linear-gradient(#fffdf6,#fff4df);border:1px solid #d9cbb2;border-radius:1rem;isolation:isolate;overflow:hidden}
.hanoi-lab .hn-peg{position:absolute;inset-block:0;left:calc(var(--peg)*100%/3);width:calc(100%/3);border:3px solid transparent;border-radius:.9rem;background:none;color:#224650;padding:0;cursor:pointer;z-index:1;touch-action:manipulation}
.hanoi-lab .hn-peg::before{content:"";position:absolute;top:36px;bottom:46px;width:10px;left:calc(50% - 5px);border-radius:8px 8px 0 0;background:#9d7954;box-shadow:inset -3px 0 #78583d}
.hanoi-lab .hn-peg::after{content:"";position:absolute;height:10px;bottom:36px;left:7%;right:7%;background:#9d7954;border-radius:4px}
.hanoi-lab .hn-peg:enabled:hover{background:#147e7009}
.hanoi-lab .hn-peg:disabled{cursor:default;opacity:1}
.hanoi-lab .hn-peg.is-selected{border-color:#d29218;background:#fff3cf80}
.hanoi-lab .hn-peg.hint-from{border-color:#2f6fed}
.hanoi-lab .hn-peg.hint-to{border-color:#18794e;background:#dff5e34d}
.hanoi-lab .hn-peg-label{position:absolute;bottom:5px;left:2%;right:2%;font-weight:750;font-size:1rem;line-height:1.25}
.hanoi-lab .hn-disks{position:absolute;inset:0;pointer-events:none;z-index:2}
.hanoi-lab .hn-disk{position:absolute;height:25px;border:1px solid #384e55;border-bottom-width:3px;border-radius:7px;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;pointer-events:none;color:#163c47;font-size:.9rem;font-weight:800;line-height:1;box-shadow:0 2px 3px #00000018}
.hanoi-lab .hn-disk.is-moving{z-index:20;box-shadow:0 8px 12px #0000002c}
.hanoi-lab .hn-status{min-height:70px;margin:1rem 0 .5rem;padding:1rem 1.2rem;background:#eaf5f2;border-left:4px solid #147e70;border-radius:.5rem;font-weight:650;overflow-wrap:anywhere}
.hanoi-lab .hn-status.is-error{background:#fff0ec;border-color:#b04025;color:#8c2e1c}
.hanoi-lab .hn-status.is-won{background:#ddf3df;border-color:#18794e;color:#165523}
.hanoi-lab .hn-mode{font-size:.9rem;color:#526776;font-weight:700}
.hanoi-lab .hn-buttons{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}
.hanoi-lab .hn-note{font-size:.94rem;line-height:1.65;color:#455e68}
.hanoi-lab [hidden]{display:none!important}
.hanoi-lab .hn-bottom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.hanoi-lab .hn-panel{min-width:0;padding:1.2rem;border:1px solid #d9e5e5;border-radius:.9rem;background:#fff}
.hanoi-lab .hn-panel h2{font-size:1.25rem;margin:0 0 1rem}
.hanoi-lab .hn-history{list-style:none;margin:0 0 1rem;padding:0;font-variant-numeric:tabular-nums}
.hanoi-lab .hn-history li{padding:.25rem 0;border-bottom:1px solid #eff3f4}
.hanoi-lab .hn-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.hanoi-lab .hn-level-badge{min-height:44px;border:1px solid #b6c9cc;border-radius:.6rem;background:#f8fbfc;color:#254b56;font-weight:750;padding:.3rem}
.hanoi-lab .hn-level-badge.is-complete{background:#daf0de;border-color:#218246;color:#15572c}
.hanoi-lab .hn-level-badge.is-current{outline:2px solid #2f6fed;outline-offset:1px}
.hanoi-lab .hn-theory summary{font-size:1.2rem;font-weight:750;cursor:pointer;min-height:44px;margin-bottom:.8rem}
.hanoi-lab .hn-formula{font-size:1.15rem;font-weight:750;padding:1rem;background:#fff6df;border-left:4px solid #bb8825;overflow-wrap:anywhere}
@media(max-width:650px){.hanoi-lab .hn-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hanoi-lab .hn-metrics p{font-size:.88rem;padding:.7rem}.hanoi-lab .hn-metrics strong{font-size:1.45rem}.hanoi-lab .hn-toolbar label{min-width:140px}.hanoi-lab .hn-bottom-grid{grid-template-columns:1fr}.hanoi-lab .hn-peg-label{font-size:.8rem}.hanoi-lab .hn-board{margin-inline:-4px}.hanoi-lab .hn-buttons .btn{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){.hanoi-lab *{scroll-behavior:auto}}