:root{--bg-color:#0f172a;--card-bg:#1e293b;--text-color:#b7b9b9;--text-color-faded:#64748b;--accent-start:#38bdf8;--accent-target:#f43f5e;--line-color:#334155;--error-color:#ef4444;--button-image-size:25px;--font-size:.8rem;--max-game-width:550px;--footer-height:80px}html,body{height:100dvh;margin:0;padding:0;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:var(--font-size);background-color:var(--bg-color);color:var(--text-color);box-sizing:border-box;flex-direction:column;align-items:center;width:100%;display:flex}header{width:100%;max-width:var(--max-game-width);box-sizing:border-box;flex-shrink:0;padding:10px 5px}main{width:100%;max-width:var(--max-game-width);background-color:var(--bg-color);-webkit-overflow-scrolling:touch;box-sizing:border-box;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;padding:5px;display:flex;overflow:hidden auto}footer{width:100%;max-width:var(--max-game-width);padding-bottom:env(safe-area-inset-bottom,0px);min-height:var(--footer-height);box-sizing:border-box;flex-shrink:0;justify-content:center;align-self:center;align-items:center;display:flex}.row{flex-direction:row;justify-content:center;width:100%;display:flex}.column{flex-direction:column;justify-content:flex-start;padding:4px;display:flex}@media screen and (width>=769px){.your-mobile-menu-class{display:none!important}}hr{border:none;border-top:1px solid var(--line-color);width:100%;margin:10px 0}h1{text-align:center;color:#add8e6;margin:5px 0;font-size:1.4rem;font-weight:700}h2{text-align:center;color:#add8e6;margin:5px 0;font-size:1.1rem;font-weight:700}h3{text-align:center;font-size:1rem;font-weight:600}p{color:var(--text-color);font-size:var(--font-size);text-align:left;margin:3px 3px 6px;padding:0;font-weight:500}b{color:#add8e6}em{color:red}.container-message{text-align:center;height:20px;padding:10px 0;font-size:16px}.message-highlighted{color:var(--error-color)}.left{text-align:left;align-self:flex-start}:root{--button-border-thickness:1px;--button-padding-thickness:1px;--button-puzzle-color:#234e72;--button-highlight-border:#f90;--button-background:#234e72;--button-greyed-out:#0f172a;--button-highlighted:#387777}button{background-color:var(--button-background);color:#0f172a;cursor:pointer;border:none;border-radius:6px;font-size:18px;font-weight:700}#button-nav-top{flex-direction:row;justify-content:flex-start;width:100%;display:flex}.save-settings-button-container{justify-content:center;padding-top:30px;display:flex}.button-image{width:var(--button-image-size);height:var(--button-image-size);filter:invert()}.button-menu-item{background-color:var(--bg-color);color:#d3d3d3;text-align:left;height:25px;padding:var(--button-padding-thickness);border:var(--button-border-thickness) solid black;justify-content:center;align-items:center;margin:3px;font-weight:400;display:inline-flex}.button-text{padding:0 7px;font-size:16px}button.round{width:25px}.button-menu-item:hover{color:#fff;border:var(--button-border-thickness) solid var(--button-highlight-border)}.button-group-puzzle{justify-content:center;width:90%;max-width:400px;margin:8px auto 0;display:flex}.button-puzzle{text-align:center;background-color:var(--button-background);color:#d3d3d3;height:35px;padding:var(--button-padding-thickness);border:var(--button-border-thickness) solid black;flex:0 55px;justify-content:center;align-items:center;margin:3px;font-size:12px;font-weight:400;display:inline-flex}.button-puzzle:hover{color:#fff;border:var(--button-border-thickness) solid var(--button-highlight-border)}.button-practice{font-size:16px}button.greyed-out{pointer-events:none;cursor:not-allowed;opacity:.6;box-shadow:none;background-color:var(--button-greyed-out)}button.solved{opacity:.6;box-shadow:none;background-color:var(--button-greyed-out)}button.started{background-color:var(--button-highlighted);font-weight:700}#exit-button{color:#fff;text-align:center;flex-grow:1;font-size:1.2rem;font-weight:lighter}.step-button{flex:25px;width:35px;margin:10px 0 5px;font-size:20px}.dash{position:relative;top:-3px}.top-button-spacer{flex:0 0 10px}#start-button{width:50px;font-size:12px}.button-menu{height:25px;margin:5px}.button-link-text{color:#fff;margin:0;font-size:13px;font-weight:550;text-decoration:none}.align-right{align-self:flex-end;margin-left:auto}.add-circle{border:var(--button-border-thickness) solid white;border-radius:15px}button.display{display:""}button.hide{display:none}.overflow-hidden{overflow:hidden}.section-middle{flex-direction:column;justify-content:flex-start;align-items:center;width:100%;max-width:100vw;padding:5px;display:flex}.container-play{flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.center{align-self:center}.input-box{justify-content:flex-start;align-items:center;max-width:400px;margin:5px 0;display:flex}.input-box.center{justify-content:center}.input-label-word{width:70px}.input-field{width:150px;max-height:30px;margin:6px;padding:0;display:inline-block}#select-level{width:60px}#checkbox-auto{width:18px;height:18px}label.range{width:48px;display:inline-block}:root{--horizontal-spacing-1:8px;--vertical-spacing-1:8px;--horizontal-spacing-0-5:4px;--key-text-color:#b7b9b9;--key-bg:#313741;--bg-color:#121213;--keyboard-width:min(100vw, 500px);--gap:5px;--key-height:calc((var(--keyboard-width) / 10) * 1.2)}.keyboard{width:var(--keyboard-width);gap:var(--gap);max-width:var(--keyboard-width);background-color:var(--bg-color);box-sizing:border-box;grid-template-columns:repeat(20,minmax(0,1fr));margin:0 auto;padding:10px;display:grid}.keyboard-key{height:var(--key-height);background-color:var(--key-bg);cursor:pointer;width:100%;color:var(--key-text-color);box-sizing:border-box;border:none;border-radius:5px;grid-column:span 2;justify-content:center;align-items:center;font-size:18px;font-weight:700;transition:transform .1s,box-shadow .1s;display:inline-flex}.spacer-key{grid-column:span 1}.enter-key,.backspace-key{grid-column:span 3;width:100%;font-size:14px}.backspace-svg{filter:invert();display:block}:root{--different-letter-color:#ffff0081;--step-color:var(--bg-color);--square-bg-color:#313741;--square-border-color:#0f172a;--square-size:38px;--font-weight:550;--step-width:calc(var(--square-size) * 6);--square-font-size:25px}.ladder-heading{margin:0;padding:0}.ladder-container{align-items:left;align-items:left;flex-direction:column;flex:2 0 60%;width:100%;max-width:320px;margin-left:5px;margin-right:5px;padding:10px 20px 10px 10px;display:flex;position:relative}.ladder-disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.8;cursor:not-allowed}.ladder-container:before{content:"";background:linear-gradient(to top, var(--accent-body), var(--accent-soul));z-index:0;width:3px;position:absolute;top:15px;bottom:15px;left:158px}.step{background-color:var(--step-color);width:var(--step-width);z-index:1;cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:0;justify-content:flex-start;align-items:center;display:flex;position:relative}.square{max-width:var(--square-size);min-width:var(--square-size);width:var(--square-size);min-height:var(--square-size);max-height:var(--square-size);height:var(--square-size);background-color:var(--square-bg-color);border:2px solid var(--square-border-color);font-size:var(--square-font-size);font-weight:var(--font-weight);box-sizing:border-box;border-radius:0;justify-content:center;align-items:center;margin:0;padding:0;font-family:Verdana,Geneva,Tahoma,sans-serif;display:flex}.square-start{pointer-events:none;color:var(--accent-start)}.square-target{pointer-events:none;color:var(--accent-target)}.square-editable{color:var(--text-color);flex:0 0 16.67%}.square-locked{pointer-events:none;color:var(--text-color);flex:0 0 16.67%}.square-with-focus{border:2px solid red;outline:none}.square-indicator,.square-tick{background-color:var(--bg-color);width:calc(var(--square-width) / 2);color:var(--text-color-faded);flex:0 0 8.33%;font-size:12px;font-weight:700}.border-top-highlighted{border-top:2px solid var(--different-letter-color)}.border-bottom-highlighted{border-bottom:2px solid var(--different-letter-color)}.puzzle-container{flex-direction:column;justify-content:space-around;display:flex}.puzzle-level{flex-direction:row;justify-content:space-between;display:flex}.puzzle-item{flex:0 0 50px;min-width:20px;height:35px;min-height:25px;margin:5px;font-size:12px}.puzzle-level-heading h3{margin-bottom:1px}html{scroll-behavior:smooth}.scroll-parent{scrollbar-width:auto;scrollbar-color:#a0a0a0 #0003;scroll-padding-top:5px;scroll-padding-bottom:5px}.scroll-parent::-webkit-scrollbar{width:16px;height:16px}.scroll-parent::-webkit-scrollbar-track{background:#ffffff0d;border-radius:8px}.scroll-parent::-webkit-scrollbar-thumb{background:#b0b0b0 padding-box padding-box;border:4px solid #0000;border-radius:8px}.scroll-parent::-webkit-scrollbar-thumb:hover{background:#fff}.scroll-parent{scroll-snap-type:y mandatory;height:100vh;overflow-y:scroll}.scroll-item{scroll-snap-align:start;width:100%;display:flex}:root{--slider-width:90%;--slider-track:90%;--slider-label-width:5px;--slider-label-padding:calc(var(--slider-width)/2)}.range-slider{width:var(--slider-width);justify-content:center;height:50px;display:flex;position:relative}.range-slider input[type=range]{width:var(--slider-track);pointer-events:none;appearance:none;background:0 0;height:5px;position:absolute;top:50%;transform:translateY(-50%)}.range-slider input[type=range]::-webkit-slider-thumb{cursor:pointer;pointer-events:auto;-webkit-appearance:none;background:#007bff;border-radius:50%;width:18px;height:18px}.range-slider input[type=range]::-moz-range-thumb{cursor:pointer;pointer-events:auto;background:#007bff;border-radius:50%;width:18px;height:18px}.slider-track{width:var(--slider-track);background:#ddd;border-radius:5px;height:5px;position:absolute;top:50%;transform:translateY(-50%)}.values{font-family:sans-serif;font-size:16px}.slider-labels{width:var(--slider-track);box-sizing:border-box;flex-direction:row;justify-content:space-between;padding:0 5px;display:flex}.slider-label{text-align:center;flex:0 0 var(--slider-label-width);box-sizing:border-box;display:inline-block}:root{--table-colour-top:lightblue;--table-colour-between:white}table{border-collapse:collapse;width:100%;font-family:sans-serif;font-size:var(--font-size);margin:5px 0}thead tr{background-color:var(--table-colour-top);color:#fff;font-weight:700}th,td{vertical-align:top;text-align:center;border-bottom:2px solid var(--table-colour-top);padding:6px}tbody tr:first-of-type{border-top:2px solid var(--table-colour-top)}tbody tr:last-of-type{border-bottom:2px solid var(--table-colour-top)}span.count{font-size:20px}.chart-container{flex-direction:column;gap:10px;width:100%;max-width:600px;margin:20px 0 0;font-family:sans-serif;display:flex}.chart-row{align-items:center;height:12px;display:flex}.label{color:#aaa;width:25px;font-size:14px;font-weight:700}.bar{width:var(--val,0%);text-align:right;color:#fff;background-color:#3b82f6;border-radius:0;align-content:center;height:100%;padding-right:3px;font-size:10px;transition:width .5s ease-in-out}@keyframes popIn{0%{opacity:0;transform:scale(.8)}40%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.step[data-index="0"]{animation-delay:.1s}.step[data-index="1"]{animation-delay:.2s}.step[data-index="2"]{animation-delay:.3s}.step[data-index="3"]{animation-delay:.4s}.step[data-index="4"]{animation-delay:.5s}.step[data-index="5"]{animation-delay:.6s}.step[data-index="6"]{animation-delay:.7s}.step[data-index="7"]{animation-delay:.8s}.step[data-index="8"]{animation-delay:.9s}.step[data-index="9"]{animation-delay:1s}.container-intro{flex-direction:column;justify-content:center;align-items:center;display:flex}.step-intro{opacity:0;flex-direction:row;justify-content:center;animation:.4s ease-out forwards popIn;display:flex}.square-into{align-self:center}.ladder-message{text-align:center;margin:10px 0 0;font-size:20px}