:root{--color-background: #f8f9fa;--color-surface: #ffffff;--color-text: #212529;--color-text-secondary: #495057;--color-primary: #0066cc;--color-primary-hover: #004c99;--color-border: #dee2e6;--color-shadow: rgba(0, 0, 0, .1);--color-peg: #8d6e63;--color-base: #5d4037;font-family:sans-serif;line-height:1.5;font-weight:400;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-5: 40px;--peg-width: 16px;--peg-height: 160px;--disk-height: 24px;--base-height: 20px;--base-width: 200px}[data-theme=dark]{--color-background: #121212;--color-surface: #1e1e1e;--color-text: #e9ecef;--color-text-secondary: #adb5bd;--color-primary: #3a86ff;--color-primary-hover: #2a75f0;--color-border: #343a40;--color-shadow: rgba(128, 128, 128, .3);--color-peg: #6d4c41;--color-base: #4e342e}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--color-background);color:var(--color-text);display:flex;justify-content:center}#app{max-width:1000px;width:100%;padding:var(--space-3);margin:0 auto}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}header+p{margin-bottom:var(--space-2)}h1{font-size:2.2rem;line-height:1.2;font-weight:600;color:var(--color-text)}.game-controls{display:flex;align-items:end;margin-bottom:var(--space-3);gap:var(--space-2)}.control-group{flex:1;width:fit-content}button{background-color:var(--color-primary);color:#fff;border:none;border-radius:8px;padding:var(--space-1) var(--space-2);font-size:1rem;font-weight:500;cursor:pointer;box-shadow:0 2px 4px var(--color-shadow)}button:hover{background-color:var(--color-primary-hover)}#nextStep{float:right}button:disabled{background-color:var(--color-border);cursor:not-allowed}#reset{text-align:center}#theme-toggle{background:none;border:none;box-shadow:none;font-size:1.2rem;cursor:pointer;padding:var(--space-1);display:flex;align-items:center;justify-content:center}.theme-icon{display:block}[data-theme=dark] .theme-icon.light,[data-theme=light] .theme-icon.dark{display:none}select{padding:4px 30px 4px 8px;border-radius:8px;border:none;outline:none;color:var(--color-text);font-size:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-surface) url('data:image/svg+xml;utf8,<svg fill="gray" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M5 8l5 5 5-5"/></svg>') no-repeat right 4px center}#selectFrame{border-radius:8px}#selectFrame:has(select:focus){outline:solid 1px}label{font-weight:500;color:var(--color-text-secondary)}#gameBoard{display:flex;justify-content:space-around;align-items:flex-end;margin:0px var(--space-4) 0;min-height:200px;padding:var(--space-2) 0;background-color:var(--color-surface);border-radius:16px;box-shadow:0 4px 8px var(--color-shadow)}.vectors #gameBoard{margin-top:140px}.tower{position:relative;display:flex;flex-direction:column;align-items:center;width:30%;height:200px}.peg{position:absolute;bottom:var(--base-height);width:var(--peg-width);height:var(--peg-height);background-color:var(--color-peg);border-radius:4px 4px 0 0;z-index:1}.tower:after{content:"";position:absolute;bottom:0;width:var(--base-width);height:var(--base-height);background-color:var(--color-base);border-radius:4px}.disks{position:absolute;bottom:var(--base-height);display:flex;flex-direction:column-reverse;align-items:center;z-index:2}.disk{height:var(--disk-height);border-radius:4px;margin-bottom:1px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.progress-container{margin-bottom:var(--space-3)}.progress-text{margin-bottom:var(--space-1);font-weight:500}#progress-bar{height:12px;outline:1px solid var(--color-border);border-radius:4px;overflow:hidden}#progressFill{height:100%;background-color:var(--color-primary);width:0}#resetMessage{text-align:center;padding:var(--space-4)}#completionMessage{text-align:center;background-color:var(--color-surface);padding:var(--space-3);border-radius:16px;box-shadow:0 4px 12px var(--color-shadow);margin-top:var(--space-4)}#completionMessage h2{color:var(--color-primary);margin-bottom:var(--space-2)}#completionMessage p{margin-bottom:var(--space-3)}#playAgain{padding:var(--space-1) var(--space-3)}.hidden{display:none}.disk-1{background-color:#ff6b6b;width:calc(var(--peg-width) * 2)}.disk-2{background-color:#f8a048;width:calc(var(--peg-width) * 3)}.disk-3{background-color:#ffd166;width:calc(var(--peg-width) * 4)}.disk-4{background-color:#06d6a0;width:calc(var(--peg-width) * 5)}.disk-5{background-color:#118ab2;width:calc(var(--peg-width) * 6)}.disk-6{background-color:#073b4c;width:calc(var(--peg-width) * 7)}h1{padding-left:0}ol{list-style:inside decimal;padding:1em}li{padding:var(--space-1);box-shadow:0 2px 4px var(--color-shadow)}code{font-size:17px;font-family:monospace;background-color:var(--color-border);padding:0 .2em;border-radius:4px}@media (orientation: portrait){:root{--peg-height: 140px;--disk-height: 20px;--base-width: 200px}#gameBoard{flex-direction:column;height:auto;min-height:500px;align-items:center;margin-top:0}.vectors #gameBoard{margin-top:0}.tower{width:100%;margin-bottom:var(--space-4);height:160px}h1{font-size:1.8rem}}@media (orientation: portrait){:active-view-transition-type(theme-toggle)::view-transition-group(board){animation-name:none}:active-view-transition-type(theme-toggle)::view-transition-image-pair(.disk){animation-name:lift}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-1){animation-delay:0ms}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-2){animation-delay:50ms}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-3){animation-delay:.1s}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-4){animation-delay:.15s}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-5){animation-delay:.2s}:active-view-transition-type(theme-toggle)::view-transition-image-pair(disk-6){animation-delay:.25s}@keyframes lift{25%,75%{transform:translateY(-20px)}}}:active-view-transition-type(theme-toggle){view-transition-name:root}:active-view-transition-type(theme-toggle) #gameBoard{view-transition-name:board}:active-view-transition-type(theme-toggle)::view-transition-group(root){z-index:-2}:active-view-transition-type(theme-toggle)::view-transition-group(board){animation-name:popup}:active-view-transition-type(theme-toggle)::view-transition-image-pair(board){perspective:50cm}:active-view-transition-type(theme-toggle)::view-transition-old(board),:active-view-transition-type(theme-toggle)::view-transition-new(board){animation-name:turn-out;outline:3pt solid var(--color-primary-hover);border-radius:16px;animation-timing-function:ease-in}:active-view-transition-type(theme-toggle)::view-transition-new(board){animation-name:turn-in}:active-view-transition-type(reset) #completionMessage{view-transition-name:message}:active-view-transition-type(reset) #reset,:active-view-transition-type(reset) #playAgain{view-transition-name:reset}:active-view-transition-type(reset) #reset,:active-view-transition-type(reset) #playAgain{background-color:var(--color-border);cursor:not-allowed}:active-view-transition-type(reset)::view-transition-group(message){z-index:-1}:active-view-transition-type(reset)::view-transition-new(message):only-child{animation-name:message-in}:active-view-transition-type(reset)::view-transition-old(message):only-child{animation-name:message-out}:active-view-transition-type(reset)::view-transition-old(reset),:active-view-transition-type(reset)::view-transition-new(reset){width:100%;height:100%}:active-view-transition-type(board-move) #gameBoard{view-transition-name:board;view-transition-class:solid}:active-view-transition-type(board-move) #completionMessage{view-transition-class:solid;view-transition-name:message}:active-view-transition-type(board-move) #reset,:active-view-transition-type(board-move) #playAgain{view-transition-class:solid;view-transition-name:reset;background-color:var(--color-border);cursor:not-allowed}:active-view-transition-type(board-move)::view-transition-old(.solid),:active-view-transition-type(board-move)::view-transition-new(.solid){animation-name:none}:active-view-transition-type(board-move)::view-transition-old(.solid){display:none}:active-view-transition-type(board-move)::view-transition-group(.disk){animation-timing-function:ease}:active-view-transition-type(board-move)::view-transition-group(message){animation-timing-function:linear}:active-view-transition-type(board-move)::view-transition-group(board){animation-timing-function:ease-in-out}:active-view-transition-type(board-move)::view-transition-group(reset){animation-timing-function:linear(0 0%,-.1 12.5% 0 25%,1 75%,1.1 87.5%,1 100%)}:active-view-transition-type(board-move).vectors::view-transition-group(.disk){animation-timing-function:ease-in-out}:active-view-transition-type(board-move).vectors::view-transition-group(board){animation-timing-function:ease}:active-view-transition-type(mode-toggle) #viewTransitions{view-transition-name:select}:active-view-transition-type(mode-toggle) #selectFrame{view-transition-name:selectFrame}:active-view-transition-type(mode-toggle)::view-transition-group(selectFrame){z-index:1}:active-view-transition-type(mode-toggle)::view-transition-image-pair(select){overflow:clip;perspective:50cm}:active-view-transition-type(mode-toggle)::view-transition-old(select){transform-origin:center center calc(var(--vtbag-vector-from-width) * -.5);animation-name:rotate-out;animation-timing-function:ease-in-out}:active-view-transition-type(mode-toggle)::view-transition-new(select){transform-origin:center center calc(var(--vtbag-vector-from-width) * -.5);animation-name:rotate-in;animation-timing-function:ease-in-out}:active-view-transition-type(progress) #currentStep{view-transition-name:step}:active-view-transition-type(progress) #progress-bar{view-transition-name:bar}:active-view-transition-type(progress)::view-transition-old(bar),:active-view-transition-type(progress)::view-transition-new(bar){animation-name:none;mix-blend-mode:soft-light}:active-view-transition-type(progress)::view-transition-new(step),:active-view-transition-type(progress)::view-transition-old(step){animation-name:none;height:100%;width:auto}:active-view-transition-type(progress)::view-transition-old(step){opacity:.66;transform:translateY(-1rem);transition:transform .5s}:active-view-transition-type(lift-and-shift)::view-transition-image-pair(.disk){animation-timing-function:inherit;animation-name:lift-and-shift}:active-view-transition-type(move)::view-transition-old(.disk),:active-view-transition-type(move)::view-transition-new(.disk){animation-name:none}:active-view-transition-type(move)::view-transition-old(.disk){display:none}:active-view-transition-type(move)::view-transition-group(disk-1){animation-delay:0ms}:active-view-transition-type(move)::view-transition-group(disk-2){animation-delay:20ms}:active-view-transition-type(move)::view-transition-group(disk-3){animation-delay:40ms}:active-view-transition-type(move)::view-transition-group(disk-4){animation-delay:60ms}:active-view-transition-type(move)::view-transition-group(disk-5){animation-delay:80ms}:active-view-transition-type(move)::view-transition-group(disk-6){animation-delay:.1s}::view-transition-group(*){animation-duration:1s}:root{view-transition-name:none;-webkit-user-select:none;user-select:none}::view-transition{pointer-events:none}:root.vtbag-vtt-move::view-transition-old(.disk),:root.vtbag-vtt-move::view-transition-new(.disk){animation-name:none}:root.vtbag-vtt-move::view-transition-old(.disk){display:none}:root.vtbag-vtt-move::view-transition-group(disk-1){animation-delay:0ms}:root.vtbag-vtt-move::view-transition-group(disk-2){animation-delay:20ms}:root.vtbag-vtt-move::view-transition-group(disk-3){animation-delay:40ms}:root.vtbag-vtt-move::view-transition-group(disk-4){animation-delay:60ms}:root.vtbag-vtt-move::view-transition-group(disk-5){animation-delay:80ms}:root.vtbag-vtt-move::view-transition-group(disk-6){animation-delay:.1s}:root.vtbag-vtt-lift-and-shift::view-transition-image-pair(.disk){animation-timing-function:inherit;animation-name:lift-and-shift}@keyframes lift-and-shift{15%,85%{transform:translateY(calc(-1*min(170px,abs(var(--vtbag-vector-from-x, 0) - var(--vtbag-vector-to-x, 0)))))}}@media (orientation: portrait){@keyframes lift-and-shift{to{transform:translate(0)}50%{transform:translate(calc((var(--vtbag-vector-from-y, 0) - var(--vtbag-vector-to-y, 0)) / 3))}}}:root.vtbag-vtt-progress #currentStep{view-transition-name:step}:root.vtbag-vtt-progress #progress-bar{view-transition-name:bar}:root.vtbag-vtt-progress::view-transition-old(bar),:root.vtbag-vtt-progress::view-transition-new(bar){animation-name:none;mix-blend-mode:soft-light}:root.vtbag-vtt-progress::view-transition-new(step),:root.vtbag-vtt-progress::view-transition-old(step){animation-name:none;height:100%;width:auto}:root.vtbag-vtt-progress::view-transition-old(step){opacity:.66;transform:translateY(-1rem);transition:transform .5s}@starting-style{{transform:translateY(0)}}:root.vtbag-vtt-mode-toggle #viewTransitions{view-transition-name:select}:root.vtbag-vtt-mode-toggle #selectFrame{view-transition-name:selectFrame}:root.vtbag-vtt-mode-toggle::view-transition-group(selectFrame){z-index:1}:root.vtbag-vtt-mode-toggle::view-transition-image-pair(select){overflow:clip;perspective:50cm}:root.vtbag-vtt-mode-toggle::view-transition-old(select){transform-origin:center center calc(var(--vtbag-vector-from-width) * -.5);animation-name:rotate-out;animation-timing-function:ease-in-out}:root.vtbag-vtt-mode-toggle::view-transition-new(select){transform-origin:center center calc(var(--vtbag-vector-from-width) * -.5);animation-name:rotate-in;animation-timing-function:ease-in-out}@keyframes rotate-out{0%{transform:rotateY(0)}25%{transform:rotateY(-90deg)}50%,to{transform:rotateY(-180deg)}}@keyframes rotate-in{0%{transform:rotateY(180deg);z-index:-1}25%{transform:rotateY(90deg)}50%,to{transform:rotateY(0);z-index:1}}:root.vtbag-vtt-board-move #gameBoard{view-transition-name:board;view-transition-class:solid}:root.vtbag-vtt-board-move #completionMessage{view-transition-class:solid;view-transition-name:message}:root.vtbag-vtt-board-move #reset,:root.vtbag-vtt-board-move #playAgain{view-transition-class:solid;view-transition-name:reset;background-color:var(--color-border);cursor:not-allowed}:root.vtbag-vtt-board-move::view-transition-old(.solid),:root.vtbag-vtt-board-move::view-transition-new(.solid){animation-name:none}:root.vtbag-vtt-board-move::view-transition-old(.solid){display:none}:root.vtbag-vtt-board-move::view-transition-group(.disk){animation-timing-function:ease}:root.vtbag-vtt-board-move::view-transition-group(message){animation-timing-function:linear}:root.vtbag-vtt-board-move::view-transition-group(board){animation-timing-function:ease-in-out}:root.vtbag-vtt-board-move::view-transition-group(reset){animation-timing-function:linear(0 0%,-.1 12.5% 0 25%,1 75%,1.1 87.5%,1 100%)}:root.vtbag-vtt-board-move.vectors::view-transition-group(.disk){animation-timing-function:ease-in-out}:root.vtbag-vtt-board-move.vectors::view-transition-group(board){animation-timing-function:ease}:root.vtbag-vtt-reset #completionMessage{view-transition-name:message}:root.vtbag-vtt-reset #reset,:root.vtbag-vtt-reset #playAgain{view-transition-name:reset}:root.vtbag-vtt-reset #reset,:root.vtbag-vtt-reset #playAgain{background-color:var(--color-border);cursor:not-allowed}:root.vtbag-vtt-reset::view-transition-group(message){z-index:-1}:root.vtbag-vtt-reset::view-transition-new(message):only-child{animation-name:message-in}:root.vtbag-vtt-reset::view-transition-old(message):only-child{animation-name:message-out}:root.vtbag-vtt-reset::view-transition-old(reset),:root.vtbag-vtt-reset::view-transition-new(reset){width:100%;height:100%}@keyframes message-out{to{opacity:0;transform:translateY(20px)}}@keyframes message-in{0%{opacity:0;transform:translateY(20px)}}:root.vtbag-vtt-theme-toggle{view-transition-name:root}:root.vtbag-vtt-theme-toggle #gameBoard{view-transition-name:board}:root.vtbag-vtt-theme-toggle::view-transition-group(root){z-index:-2}:root.vtbag-vtt-theme-toggle::view-transition-group(board){animation-name:popup}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(board){perspective:50cm}:root.vtbag-vtt-theme-toggle::view-transition-old(board),:root.vtbag-vtt-theme-toggle::view-transition-new(board){animation-name:turn-out;outline:3pt solid var(--color-primary-hover);border-radius:16px;animation-timing-function:ease-in}:root.vtbag-vtt-theme-toggle::view-transition-new(board){animation-name:turn-in}@keyframes popup{33%,80%{z-index:1}}@keyframes turn-out{20%{transform:translateZ(15cm)}50%,to{transform:translateZ(15cm) rotateY(90deg)}}@keyframes turn-in{0%,50%{transform:translateZ(15cm) rotateY(-90deg)}80%{transform:translateZ(15cm)}to{transform:translateZ(0);outline-width:0}}@media (orientation: portrait){@keyframes turn-out{50%,to{transform:rotateY(90deg)}}@keyframes turn-in{0%,50%{transform:rotateY(-90deg)}to{outline-width:0}}}@media (orientation: portrait){:root.vtbag-vtt-theme-toggle::view-transition-group(board){animation-name:none}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(.disk){animation-name:lift}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-1){animation-delay:0ms}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-2){animation-delay:50ms}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-3){animation-delay:.1s}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-4){animation-delay:.15s}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-5){animation-delay:.2s}:root.vtbag-vtt-theme-toggle::view-transition-image-pair(disk-6){animation-delay:.25s}@keyframes lift{25%,75%{transform:translateY(-20px)}}}