:root{--text:#222;--text-light:#666;--text-med:#444;--bg:#ccc;--bright:#eee;--font:"Inter", Verdana, Geneva, Tahoma, sans-serif;--mono:"IBM Plex Mono", monospace;--hover-bg:#fff8;--link-color:oklch(61.54% .168 260.44);font-family:var(--font);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-snap-type:y mandatory;scroll-behavior:smooth;font-size:18px}code{font-family:var(--mono)}input,button{font-family:var(--font);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:20px}body{margin:0}section{border-bottom:.25rem solid var(--text);box-sizing:border-box;scroll-snap-align:start;max-width:80ch;height:100vh;margin-inline:auto;padding:2rem;overflow-y:hidden}h1{margin:0;margin-block-end:1rem}section.top{flex-direction:column;justify-content:space-between;display:flex}.hero{flex-wrap:wrap;justify-content:space-between;gap:1rem;display:flex}.hero h1{font-size:8vh}@media screen and (width>=1000px){.hero h1{letter-spacing:.25ch}}.hero h1{margin:0}.hero h1.secret{text-align:center;width:100%;font-size:10vh;font-weight:900}div.top-wrapper{background:var(--text);color:var(--bright)}a.reasons-fancy{color:unset}[data-title]:hover{cursor:help;-webkit-text-decoration:underline dotted var(--link-color) 3px;text-decoration:underline dotted var(--link-color) 3px}[data-title]:hover:after{content:attr(data-title);color:var(--text);background:var(--hover-bg);-webkit-backdrop-filter:blur(.1rem);backdrop-filter:blur(.1rem);border-radius:.6rem;padding:.3rem;font-size:.75rem;position:absolute;transform:translateY(-.25rem)translate(.25rem)}.asterisk{color:var(--link-color)}.hint-hover{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-decoration-thickness:3px}a{color:var(--text-light)}a:hover{color:var(--link-color)}code{background:var(--hover-bg);background:#e7e7e7;border-radius:.25rem;padding:.2rem;font-size:calc(1em - .2rem)}div.wip-demo{color:#822;box-sizing:border-box;background:#f88;justify-content:center;align-items:center;height:100%;font-size:1.25rem;font-weight:600;display:flex}section.what{flex-direction:column;display:flex}iframe{width:100%;height:100%}ul li{margin-bottom:.5rem}#step-1 input.text-key{background:var(--hover-bg);text-overflow:ellipsis;border-radius:.25rem;width:15ch;min-width:1ch;padding:.25rem;display:inline}input{box-sizing:border-box;border:1px solid #0000}input:hover{border:1px solid var(--text-light)}table.matrix,table.conversion-table{border-collapse:collapse}table.matrix td,table.conversion-table td{text-align:center;border:1px solid #000;width:2ch;padding:.25rem}.table-scroll-wrapper{overflow:auto}div.matrix-holder{flex-direction:row;justify-content:center;align-items:center;display:flex}@media screen and (width<=600px){p{margin-block:.25em}ul,ol,h2{margin-block:.5em}}div.caesar-demo{background:var(--bright);border:1px solid #000;height:100%;display:flex}div.letter-row{display:flex}div.letter{width:calc(1ch + .2em);font-family:var(--mono);box-sizing:border-box;border:.5px solid #4448;height:1.7em;padding:.1em}div.caesar-demo input[type=number]{border-radius:.25rem;width:4ch}div.caesar-demo .middle-panel,div.caesar-demo .left-panel{flex-direction:column;justify-content:center;align-items:center;gap:.25rem;display:flex}div.caesar-demo .left-panel{width:30%;padding:1rem}div.caesar-demo .middle-panel{flex-grow:1;padding:1rem}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%}input[type=range]:hover{border:1px solid #0000}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:#bdbdbd;border-radius:4px;width:100%;height:8px}input[type=range]::-moz-range-track{background:#e2e8f0;border-radius:4px;width:100%;height:8px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#2563eb;border-radius:50%;width:20px;height:20px;margin-top:-6px;transition:transform .1s}input[type=range]::-moz-range-thumb{appearance:none;background:#2563eb;border-radius:50%;width:20px;height:20px;margin-top:-6px;transition:transform .1s}input[type=range]:hover::-webkit-slider-thumb{background:#1d4ed8;transform:scale(1.1)}input[type=range]:hover::-moz-range-thumb{background:#1d4ed8;transform:scale(1.1)}.left-panel .transform-slider{background:#80808016;border:1px solid #bbb;border-radius:.25rem;width:calc(100% - 2rem);margin-inline:1rem;padding:.5rem;box-shadow:0 0 1rem 1rem #8881}.left-panel .transform-slider div:last-child{margin-top:.25rem}div.caesar-demo{flex-direction:row;align-items:stretch;height:100%;overflow:scroll}.rows-label{font-family:var(--mono);color:var(--text-light);text-transform:uppercase;letter-spacing:.1em;align-self:flex-start;font-size:.65rem}div.letter.enciphered{color:oklch(35% .18 260);background:oklch(93% .06 260);font-weight:600}div.letter.arrow-cell{color:var(--text-light);border-color:#0000;justify-content:center;align-items:center;display:flex;transform:translateY(-.2em)scale(.75)}.arrow-row{height:1.2em}.k-label{font-family:var(--mono);align-items:center;gap:.25rem;font-size:1.1rem;display:flex}.k-input{background:var(--hover-bg);text-align:center;border-radius:.25rem;width:4.5ch;padding:.2rem .25rem}.slider-label{color:var(--text-light);text-align:center;margin-top:.35rem;font-size:.8rem}div.caesar-demo .right-panel{border-left:1px solid #ccc;min-width:4rem;padding:.75rem .5rem;overflow-y:auto}.wheel-title{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-light);text-align:center;margin-bottom:.4rem;font-size:.65rem}.alphabet-wheel{flex-direction:column;gap:.05rem;display:flex}.wheel-row{font-family:var(--mono);align-items:center;gap:.25rem;font-size:.75rem;line-height:1.4;display:flex}.wheel-from{color:var(--text-light);text-align:right;width:1.2ch}.wheel-arrow{color:#bbb;font-size:.7rem}.wheel-to{color:oklch(35% .18 260);width:1.2ch;font-weight:600}div.caesar-demo .left-panel{border-right:1px solid #ccc;gap:.75rem;min-width:9rem;padding:1rem .75rem}@media screen and (width<=600px){div.caesar-demo .right-panel{display:none}}input.caesar-demo-text{font:var(--mono);background:var(--hover-bg);field-sizing:content;border-radius:.25rem;padding:.2rem;font-size:calc(1em - .2rem)}section#step-1 ul,section#step-3 ol{color:var(--text-med);font-size:.8rem}section.what ol,section.what ul{color:var(--text-med);font-size:.75rem}.caesar-demo h2{margin:0;font-size:1.25rem}table.matrix{font-family:var(--mono)}table.matrix td{width:calc(1ch + .25rem);height:calc(1em + .25rem);padding:.25rem}section#step-1 code.checks{color:#822;font-weight:700}section#step-1 code.checks.good{color:#00a100}table.conversion-table{font-family:var(--mono)}.error{color:#822;box-sizing:border-box;background:#faa;border:1px solid;border-radius:.25rem;margin-block:1rem;padding:1rem}.error a{color:#611;font-weight:700}input[type=text].nice-inp{field-sizing:content;border-radius:.25rem;padding:.25rem;font-size:.9em}#step-2:has(.error) div.part-a{display:none}small{color:var(--text-med)}section.can-overflow{overflow-y:scroll}hr{border:.5px solid var(--text-med)}section#thank-you{border-bottom:none}.the-end{background:#add8e6 url("data:image/svg+xml,%3csvg%20width='1195'%20height='704'%20viewBox='0%200%201195%20704'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1_4)'%3e%3cellipse%20cx='536'%20cy='704'%20rx='315'%20ry='239'%20fill='%2328B14B'/%3e%3cellipse%20cx='897'%20cy='704'%20rx='397'%20ry='134'%20fill='%2332CF59'/%3e%3cpath%20d='M429%20725.75C429%20802.38%20309.012%20864.5%20161%20864.5C12.9877%20864.5%20-107%20802.38%20-107%20725.75C-107%20649.12%2012.9877%20587%20161%20587C309.012%20587%20429%20649.12%20429%20725.75Z'%20fill='%233DCE62'/%3e%3cellipse%20cx='475'%20cy='712'%20rx='105'%20ry='51'%20fill='%233FDA66'/%3e%3ccircle%20cx='1076'%20cy='143'%20r='74'%20fill='%23FFFB85'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1_4'%3e%3crect%20width='1195'%20height='704'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e") bottom/cover no-repeat;position:relative}.playground-container{background:linear-gradient(#0000 50%,#add8e6 100%)}#full-playground{border-bottom:none}#thank-you h1{text-align:center}#thank-you{flex-direction:column;justify-content:center;align-items:center;display:flex}footer{z-index:1000;flex-direction:row;justify-content:space-between;align-items:center;padding:1rem;font-size:.75rem;display:flex;position:absolute;bottom:0;left:0;right:0}footer a{color:unset}.error-popup{margin-inline:1rem;transition:bottom .5s;position:fixed;bottom:-12rem;left:1rem;right:1rem}.error-popup.active{bottom:1rem}