html{--large-size: max(20px, ((min(100vw, 100vh - 20em) - 16px) / var(--size)) - 4px) ;--small-size: max(16px, ((min(100vw, 100vh - 20em) - 16px) / (2 * var(--size) + 1)) - 4px) ;--background: white;--background-alpha: rgba(255, 255, 255, .5);--foreground: black;--black: #999;--possible: #ddd;--orange: orange;--orange-fg: #b60;--yellow: yellow;--green: #0f0;--red-fg: #900;--green-fg: #060;color-scheme:dark light;font-family:system-ui,sans-serif}html.high-contrast{--orange: #d81b60;--orange-fg: #b14;--yellow: #0bf;--green: #f80;--red-fg: #509;--green-fg: #940}.help{--large-size: 35px;--small-size: 30px}.help .grid{grid-auto-columns:min-content}.help .message{width:75%}@media(prefers-color-scheme:dark){html{--background: black;--background-alpha: rgba(0, 0, 0, .5);--foreground: white;--black: #333;--possible: #888;--orange: #b60;--orange-fg: orange;--yellow: #a94;--green: green;--red-fg: #f77;--green-fg: #7f7}html.high-contrast{--orange: #D81B60;--orange-fg: #f38;--yellow: #07b;--green: #940;--red-fg: #a6f;--green-fg: #f80}}.title{grid-area:title;justify-self:center}h1{text-align:center}.title h1,.title h3{margin:8px 0}.keyboard-container{grid-area:keyboard;position:sticky;bottom:0}.keyboard{border-radius:10px;background-color:var(--background-alpha);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);width:100%;box-sizing:border-box;display:grid;max-width:700px;grid-template-areas:"q q w w e e r r t t y y u u i i o o p p" ". a a s s d d f f g g h h j j k k l l ." "R R R z z x x c c v v b b n n m m B B B";margin:0 auto;padding:4px 4px 8px}#templates{display:none}.menu{position:fixed;right:0;top:0}.menu button{font-size:2em;padding:3px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:3px}html,body,.main{height:100%;margin:0}.title,.clues,.grid{padding:8px}.screen{display:flex;position:fixed;top:0;bottom:0;left:0;right:0;background:#0006;z-index:1;justify-content:center;align-items:center}.screen>.message{position:absolute;box-shadow:10px 10px 20px #000000b3;background:var(--background);border:2px solid #777}.message>div{overscroll-behavior:contain;overflow:auto;max-width:90vw;max-height:90vh;padding:10px;width:100%;box-sizing:border-box}.close{position:absolute;top:0;right:0;font-size:24px}.modal .message{font-size:2em}.main{display:grid;align-items:start;grid-template-areas:"title" "clues" "grid" "keyboard";grid-template-rows:min-content min-content 1fr min-content}@keyframes slide-in-left{0%{transform:translate(30%);opacity:0}}.menu .contents{position:absolute;right:0;white-space:nowrap;animation:slide-in-left .2s}.date{text-align:center}.clues{justify-self:center;grid-area:clues}.hint{text-align:center;padding:0 8px;margin:4px 0;position:relative}.author{text-align:center;padding:0 8px}@media only screen and (min-width:768px){#expand-button{display:none}.menu .contents{display:block;animation:none}.main{grid-template-areas:"title    title" "grid     clues" "keyboard keyboard";grid-template-rows:min-content 1fr min-content}html{--large-size: max(24px, ((min(100vw / 2, 100vh - 21em) - 16px) / var(--size)) - 4px) ;--small-size: max(20px, ((min(100vw / 2, 100vh - 21em) - 16px) / (2 * var(--size) + 1)) - 4px) }}@keyframes unblur{0%{filter:blur(8px)}}#hint{min-height:26px;animation:unblur 1s paused}.reveal #hint{animation-play-state:running}#reveal-hint{position:absolute;bottom:0;transition:opacity .3s,transform .3s;transform:translate(-50%);cursor:pointer}.reveal #reveal-hint{opacity:0;transform:translate(-50%) translateY(1rem);pointer-events:none}.grid-container{grid-area:grid;justify-self:center;justify-content:center}.word{display:inline-block}.clues .tile,.clues .empty{width:var(--small-size);height:var(--small-size);display:inline-block;border-radius:2px}.grid{display:grid;justify-self:center}.grid>div{width:var(--large-size);height:var(--large-size);margin:2px;perspective:200px;perspective-origin:center center}.grid .tile{border-radius:3px;transform-style:preserve-3d;cursor:pointer}.tile{box-sizing:border-box;position:relative;width:100%;height:100%;margin:2px;border:2px solid #777}.crossing{text-decoration:underline}.tile>div{width:100%;height:100%;text-align:center;line-height:120%;font-size:calc(var(--base-size) * .75)}.clues .tile>div{--base-size: var(--small-size)}.clues .spacer{height:0;border:none}.grid .tile>div{--base-size: var(--large-size);backface-visibility:hidden;-webkit-backface-visibility:hidden;position:absolute}.grid.flipped .tile>div:nth-child(1){transform:none}.grid .tile>div:nth-child(1){transform:rotateY(180deg)}.grid .tile>div:nth-child(2){transform:translateZ(0)}.tile>div:nth-child(1){background:var(--black)}.tile.orange-horiz>div:nth-child(1){background:var(--orange)}.tile.orange-vert>div:nth-child(1){background:var(--orange)}.tile.yellow>div:nth-child(1){background:var(--yellow)}.tile.green>div:nth-child(1){background:var(--green)}.tile.error>div:nth-child(2){color:var(--red-fg)}.tile.green-hint>div:nth-child(2){color:var(--green-fg)}.key{line-height:300%;text-align:center;margin:.5ch;border-radius:3px;background:var(--possible);cursor:pointer;min-width:1em}.key.small{font-size:small;line-height:380%}.key.black{background:var(--black)}.key.orange{background:var(--orange)}.key.yellow{background:var(--yellow)}.key.green{background:var(--green)}.selected{outline:4px groove #88f}#eta{color:var(--green-fg)}#guesses{font-weight:700;color:var(--difficulty-color)}#stats table{width:100%}#stats table td:nth-child(2){position:relative;width:100%}.bar{box-sizing:border-box;color:var(--background);background:var(--difficulty-color)}.bar+.bar{border-left:1px solid var(--background)}.table .group{position:relative;display:flex;height:5px}.table .bar{height:5px}.legend{display:flex}.legend .group{display:flex;margin:0 8px}.legend .bar{padding:0 8px}.normal{--difficulty-color: var(--orange-fg)}.hard{--difficulty-color: var(--green-fg)}.used-hint{filter:saturate(.3)}[result=won] .lost,[result=lost] .won{display:none}.center{text-align:center}button:not(.ui){margin:4px 10px;font-size:1.2em}.hide-hints .hint{display:none}.hint>button{margin:0}button:not(.ui):not([disabled]){border:1px solid buttontext}.hidden{display:none}.months{display:flex;flex-wrap:wrap}.month{border:1px solid;display:grid;margin:8px}.month .header{padding:2px;border-top:1px solid;border-bottom:1px solid}.month>a{text-align:center}.complete{font-weight:700;color:var(--green-fg)}
