*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}#app{min-height:100vh}:root{--paper: #e8dcc4;--paper-dark: #d4c4a0;--ink: #3d2c1e;--ink-faded: #5c4a3a;--accent: #8b4513;--accent-light: #a0522d;--shadow: #2a1f18;--sepia: rgba(61, 44, 30, .15);--font-scribble: "Caveat", "Segoe Script", "Bradley Hand", cursive;--font-body: "Crimson Text", "Georgia", serif}*{box-sizing:border-box}html{height:100vh;overflow:hidden}body{margin:0;min-height:100vh;background:linear-gradient(140deg,#975d40,#7d4b4b,#1a1410);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.5;overflow:auto;height:100vh}#app{min-height:100vh;padding:0;display:flex;align-items:center;justify-content:center}.page{flex-grow:1;flex-shrink:0;display:flex;justify-content:center}.torn-paper-wrapper{position:relative;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));max-width:min(720px,calc(100vw - 32px));margin:16px}.torn-paper{position:relative;color:var(--ink);padding:32px}.torn-paper-background{position:absolute;width:100%;height:100%;top:0;left:0;background:var(--paper);filter:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="wavy"><feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="20" /></filter></svg>#wavy');box-shadow:0 0 60px #8a4d0f inset;z-index:-1}.container{display:flex;flex-direction:row;flex-wrap:wrap-reverse;width:100%;justify-content:center}.legend{padding:16px;background:linear-gradient(30deg,var(--paper),var(--paper-dark));left:0;height:100vh;display:flex;flex-direction:row;flex-wrap:wrap;gap:16px;align-self:flex-end;position:sticky;top:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}.legend.legend-inline{position:relative;max-width:min(720px,calc(100vw - 32px));margin:32px 16px 16px;height:auto;padding:32px;background:transparent}.title{font-family:var(--font-scribble);font-size:32px;font-weight:700;color:var(--ink);margin:0 0 .25rem;letter-spacing:.02em;flex-basis:100%}.hint{font-size:.9rem;color:var(--ink-faded);margin:0 0 1.25rem;font-style:italic}.key-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.key-cell-greyed{opacity:.5;background:#0000000f}.key-cell-greyed .key-symbol,.key-cell-greyed .key-guess{color:var(--ink-faded)}.key-cell-greyed:hover{opacity:.85}.key-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:2.5rem;min-height:2.5rem;padding:.35rem .5rem;background:#fff6;border:1px solid var(--paper-dark);border-radius:3px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;height:60px;max-width:40px}.key-cell:hover{background:#ffffffb3;border-color:var(--accent)}.key-cell.selected{background:#8b451326;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light);outline:none}.key-cell.digit-cell{cursor:default}.key-symbol{font-size:1.25rem;line-height:1.2;color:var(--ink)}.key-guess{font-size:.75rem;font-weight:600;color:var(--accent);margin-top:.15rem;text-transform:uppercase}.message-header{display:flex;justify-content:space-between;align-items:center}.message-pagination{display:flex;align-items:center;gap:8px;margin:0;padding:0}.page-button{color:var(--ink);border:2px solid var(--ink);border-radius:4px;background:transparent;cursor:pointer;height:24px}.page-button:hover{background:var(--paper-dark)}.message-title{font-family:var(--font-scribble);font-size:1.5rem;font-weight:600;color:var(--ink);margin:0 0 .75rem;display:flex;gap:8px}.message-block{line-height:2.2;word-spacing:.2em;letter-spacing:.02em;border-top:1px solid var(--sepia);padding-top:1rem;display:flex;flex-direction:row;gap:16px;flex-wrap:wrap}.message-char{display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;min-width:16px}.message-char.literal{min-width:0}.message-char.literal .message-symbol{cursor:default}.message-symbol{font-size:1.1rem;color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none}.symbol-selected{text-shadow:#ff0078 0px 0px 4px,#ff8f00 0 0 10px}.message-guess{font-size:.7rem;font-weight:600;color:var(--accent);text-transform:uppercase}.key-capture{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none}.key-capture:focus{outline:none}