:root{--bg: #ffffff;--text: #1a1a1b;--muted: #787c7e;--border: #d3d6da;--border-filled: #878a8c;--absent: #787c7e;--present: #f2c230;--exact: #3f8f3f;--on-absent: #ffffff;--on-present: #1a1a1b;--on-exact: #ffffff;--key-bg: #d3d6da;--key-text: #1a1a1b;--toast-bg: #1a1a1b;--toast-text: #ffffff;--tile: min(62px, calc((100vw - 60px)/5) , calc((100dvh - 330px) / 6.5));color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #121213;--text: #f8f8f8;--muted: #818384;--border: #3a3a3c;--border-filled: #565758;--absent: #3a3a3c;--exact: #4c9a4c;--key-bg: #818384;--key-text: #ffffff;--toast-bg: #f8f8f8;--toast-text: #121213;color-scheme:dark}}html,body,#app{height:100%}html,body{font:14px/1.21 Inter,Helvetica Neue,arial,sans-serif;font-weight:400;margin:0;padding:0;background-color:var(--bg);color:var(--text)}.wordle{max-width:500px;width:100%;height:100%;height:100dvh;margin:auto;padding:0 10px;display:flex;flex-direction:column;flex-wrap:nowrap;box-sizing:border-box;position:relative}.header{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;text-align:center;padding:10px 0;border-bottom:1px solid var(--border)}.header h1{margin:0;font-size:26px;font-weight:800;letter-spacing:.01em}.header__button{width:32px;height:32px;padding:0;border:2px solid var(--border-filled);border-radius:50%;background:none;color:var(--text);font:inherit;font-size:17px;font-weight:700;cursor:pointer}.board{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:10px 0}.board__tiles{display:flex;gap:5px;justify-content:center}.board__tile{box-sizing:border-box;width:var(--tile);height:var(--tile);font-size:calc(var(--tile) * .55);font-weight:700;line-height:calc(var(--tile) - 4px);border:2px solid var(--border-filled);text-align:center;text-transform:uppercase;transition:all .3s ease-in-out}.board__tile.empty{border-color:var(--border)}.keyboard__key.answered,.board__tile.answered{background-color:var(--absent);border-color:var(--absent);color:var(--on-absent)}.keyboard__key.correct,.board__tile.correct{background-color:var(--present);border-color:var(--present);color:var(--on-present)}.keyboard__key.exact,.board__tile.exact{background-color:var(--exact);border-color:var(--exact);color:var(--on-exact)}@keyframes pop{50%{transform:scale(1.1)}}@keyframes flip{50%{transform:rotateX(90deg)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes bounce{0%,20%{transform:translateY(0)}40%{transform:translateY(-30%)}50%{transform:translateY(5%)}60%{transform:translateY(-15%)}80%{transform:translateY(2%)}to{transform:translateY(0)}}.board__tile:not(.empty):not(.answered){animation:pop .1s}.board__tiles:not(.reveal) .board__tile.answered{transition:none}.board__tiles.reveal .board__tile{animation:flip .5s ease-in;animation-fill-mode:backwards}.board__tiles.reveal .board__tile:nth-child(1){animation-delay:0ms;transition-delay:.25s}.board__tiles.reveal .board__tile:nth-child(2){animation-delay:.1s;transition-delay:.35s}.board__tiles.reveal .board__tile:nth-child(3){animation-delay:.2s;transition-delay:.45s}.board__tiles.reveal .board__tile:nth-child(4){animation-delay:.3s;transition-delay:.55s}.board__tiles.reveal .board__tile:nth-child(5){animation-delay:.4s;transition-delay:.65s}.board__tiles.win .board__tile{animation:flip .5s ease-in backwards,bounce .8s ease-in-out 1s}.board__tiles.win .board__tile:nth-child(1){animation-delay:0ms,1s}.board__tiles.win .board__tile:nth-child(2){animation-delay:.1s,1.1s}.board__tiles.win .board__tile:nth-child(3){animation-delay:.2s,1.2s}.board__tiles.win .board__tile:nth-child(4){animation-delay:.3s,1.3s}.board__tiles.win .board__tile:nth-child(5){animation-delay:.4s,1.4s}.board__tiles.shake{animation:shake .6s}@media(prefers-reduced-motion:reduce){.board__tile,.board__tiles,.toast,.share__button{animation:none!important;transition:none!important}}.keyboard{--key-gap: 5px;--key-width: calc((100% - 11 * var(--key-gap)) / 12);padding:0 0 10px;padding-bottom:max(10px,env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none}.keyboard__row{display:flex;width:100%;gap:var(--key-gap);margin-bottom:7px;justify-content:center}.keyboard__key{flex:0 0 var(--key-width);min-width:0;height:52px;margin:0;padding:0;border:0;border-radius:5px;background-color:var(--key-bg);color:var(--key-text);font:inherit;font-size:15px;font-weight:700;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s ease-in-out,color .3s ease-in-out}.keyboard__key:active{filter:brightness(.9)}.keyboard__key.special{flex:1 1 auto;font-size:22px}.toast{position:absolute;top:70px;left:50%;z-index:10;max-width:calc(100% - 40px);box-sizing:border-box;padding:12px 16px;border-radius:8px;background:var(--toast-bg);color:var(--toast-text);font-weight:700;text-align:center;box-shadow:0 4px 16px #0003;pointer-events:none;opacity:0;transform:translate(-50%,-10px);transition:all .3s ease-in-out}.toast.show{opacity:1;transform:translate(-50%)}.share__title{flex:1 0 100%;margin:0;font-size:22px;font-weight:700;text-align:center}.share__timer{flex:1 0 100%;margin:0 0 8px;color:var(--muted);text-align:center}.share__timer strong{display:block;margin-top:4px;color:var(--text);font-size:18px;font-variant-numeric:tabular-nums}.share{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:20px 0;padding-bottom:max(20px,env(safe-area-inset-bottom))}.share__button{box-sizing:border-box;flex:1 1 100%;max-width:300px;padding:14px 20px;border:0;border-radius:8px;background-color:var(--exact);color:var(--on-exact);font:inherit;font-size:16px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;transition:filter .2s ease-in-out}.share__button:hover{filter:brightness(1.1)}.share__button.secondary{background-color:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--border-filled)}.help{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:#00000080;animation:fade-in .2s ease-out}.help__dialog{position:relative;width:100%;max-width:420px;max-height:100%;overflow-y:auto;box-sizing:border-box;padding:24px 20px 20px;border-radius:12px;background:var(--bg);color:var(--text);font-size:15px;text-align:left;box-shadow:0 10px 40px #0000004d}.help__dialog h2{margin:0 0 12px;font-size:22px}.help__dialog p{margin:0 0 10px}.help__dialog .share__button{display:block;width:100%;max-width:none;margin-top:16px}.help__close{position:absolute;top:8px;right:8px;width:36px;height:36px;padding:0;border:0;background:none;color:var(--muted);font-size:28px;line-height:1;cursor:pointer}.help__example{margin:14px 0;--tile: 40px}.help__example .board__tiles{justify-content:flex-start;margin-bottom:6px}@keyframes fade-in{0%{opacity:0}}