.g-hanoi{--hn-count:3;--hn-dh:clamp(15px, 4.6vw, 24px);--hn-gap:3px;--hn-wood:color-mix(in srgb, var(--c-border-strong) 82%, var(--c-surface));gap:var(--sp-3)}.g-hanoi .hn-meter{justify-content:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}.g-hanoi .hn-chip{align-items:center;gap:var(--sp-1);padding-block:var(--sp-1);padding-inline:var(--sp-3);border-radius:var(--r-full);background:var(--c-surface-2);color:var(--c-text-dim);font-size:var(--fs-sm);display:inline-flex}.g-hanoi .hn-chip--target{background:var(--c-brand-soft);color:var(--c-brand);text-align:center}.g-hanoi .hn-chip b{font-family:var(--font-num);font-variant-numeric:tabular-nums;color:var(--c-text)}.g-hanoi .hn-stage{justify-content:center;align-items:flex-end;gap:var(--sp-2);width:min(100%,440px);display:flex}.g-hanoi .hn-peg{min-width:0;padding:0;border-radius:var(--r-lg);background:0 0;border:2px solid #0000;flex-direction:column;flex:1 1 0;align-items:center;padding-block-start:var(--sp-2);display:flex}.g-hanoi .hn-peg:hover{background:color-mix(in srgb, var(--c-brand) 7%, transparent)}.g-hanoi .hn-peg.is-holding{border-color:color-mix(in srgb, var(--c-brand) 55%, transparent);background:var(--c-brand-soft)}.g-hanoi .hn-peg.is-hint-from{border-style:dashed;border-color:var(--c-brand)}.g-hanoi .hn-peg.is-hint-to{border-style:dashed;border-color:var(--c-accent)}.g-hanoi .hn-tower{justify-content:flex-start;align-items:center;gap:var(--hn-gap);width:100%;min-height:calc((var(--hn-dh) + var(--hn-gap)) * var(--hn-count) + var(--sp-5));flex-direction:column-reverse;padding-block-end:4px;display:flex;position:relative}.g-hanoi .hn-rod{border-radius:var(--r-full);background:var(--hn-wood);width:9px;margin-inline:auto;position:absolute;inset-block:0;inset-inline:0}.g-hanoi .hn-base{border-radius:var(--r-sm);background:var(--hn-wood);width:100%;height:10px}.g-hanoi .hn-peg.is-goal .hn-rod,.g-hanoi .hn-peg.is-goal .hn-base{background:color-mix(in srgb, var(--c-good) 45%, var(--hn-wood))}.g-hanoi.is-solved .hn-peg.is-goal{border-color:color-mix(in srgb, var(--c-good) 60%, transparent)}.g-hanoi .hn-disc{--hn-tone:var(--c-brand);--hn-fill:color-mix(in srgb, var(--hn-tone) 26%, var(--c-surface));--hn-edge:color-mix(in srgb, var(--hn-tone) 62%, var(--c-surface));--hn-ink:color-mix(in srgb, var(--hn-tone) 52%, var(--c-text));z-index:1;box-sizing:border-box;height:var(--hn-dh);border:2px solid var(--hn-edge);border-radius:var(--r-full);background:var(--hn-fill);color:var(--hn-ink);font-size:clamp(9px,2.7vw,13px);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;place-items:center;line-height:1;display:grid;position:relative}.g-hanoi .hn-disc[data-tone="0"]{--hn-tone:var(--cat-patterns)}.g-hanoi .hn-disc[data-tone="1"]{--hn-tone:var(--cat-math)}.g-hanoi .hn-disc[data-tone="2"]{--hn-tone:var(--cat-logic)}.g-hanoi .hn-disc[data-tone="3"]{--hn-tone:var(--cat-memory)}.g-hanoi .hn-disc[data-tone="4"]{--hn-tone:var(--cat-language)}.g-hanoi .hn-disc[data-tone="5"]{--hn-tone:var(--cat-spatial)}.g-hanoi .hn-disc.is-held{z-index:2;transform:translateY(calc(var(--hn-dh) * -.75));outline:3px dashed var(--c-brand);outline-offset:2px;box-shadow:var(--shadow-md)}.g-hanoi .hn-foot{justify-content:center;align-items:center;gap:var(--sp-1);min-height:20px;font-size:var(--fs-xs);color:var(--c-text-faint);margin-block-start:var(--sp-1);display:flex}.g-hanoi .hn-num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.g-hanoi .hn-tag{padding-block:1px;padding-inline:var(--sp-2);border-radius:var(--r-full);background:var(--c-good-soft);color:var(--c-good);font-weight:var(--fw-semi)}.g-hanoi .hn-note{max-width:40ch;color:var(--c-text-faint);font-size:var(--fs-xs);line-height:var(--lh-snug);text-align:center;margin:0}.g-hanoi .hn-sr{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.g-hanoi .hn-disc,.g-hanoi .hn-peg{transition:none}.g-hanoi.is-motion .hn-peg{transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)}.g-hanoi.is-motion .hn-disc{transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease)}.g-hanoi.is-motion .hn-peg.is-shake .hn-tower{animation:hn-shake .34s var(--ease)}@keyframes hn-shake{0%,to{transform:translate(0)}22%{transform:translate(-5px)}48%{transform:translate(5px)}74%{transform:translate(-3px)}}