@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.grid{display:grid}.hidden{display:none}.rounded{border-radius:.25rem}.uppercase{text-transform:uppercase}}:root{--bg:#121213;--surface:#1a1a1b;--ink:#fff;--muted:#818384;--line:#3a3a3c;--tile-border:#565758;--tile-empty-border:#3a3a3c;--key-bg:#818384;--key-ink:#fff;--correct:#538d4e;--present:#b59f3b;--absent:#3a3a3c;--accent:#538d4e;--font-sans:ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}body[data-theme=light]{--bg:#fff;--surface:#f4f4f5;--ink:#1a1a1b;--muted:#787c7e;--line:#d3d6da;--tile-border:#878a8c;--tile-empty-border:#d3d6da;--key-bg:#d3d6da;--key-ink:#1a1a1b;--correct:#6aaa64;--present:#c9b458;--absent:#787c7e;--accent:#6aaa64}*{box-sizing:border-box}body{background:var(--bg);min-block-size:100dvh;color:var(--ink);font-family:var(--font-sans);place-items:start center;margin:0;transition:background .3s,color .3s;display:grid}.app{grid-template-rows:auto 1fr auto;gap:.5rem;min-block-size:100dvh;inline-size:min(100vw,30rem);padding-block-end:.75rem;display:grid}.app__header{border-block-end:1px solid var(--line);grid-template-columns:2.5rem 1fr 2.5rem;align-items:center;padding:.5rem .75rem;display:grid}.app__title{text-align:center;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:1.5rem;font-weight:700}.icon-button{cursor:pointer;block-size:2.5rem;inline-size:2.5rem;color:inherit;background:0 0;border:none;border-radius:.5rem;place-items:center;font-size:1.1rem;display:grid}.icon-button:hover{background:var(--ink)}@supports (color:color-mix(in lab,red,red)){.icon-button:hover{background:color-mix(in oklab,var(--ink) 10%,transparent)}}.icon-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.play{align-content:center;place-items:center;gap:.5rem;padding:.5rem;display:grid;position:relative}.message{z-index:2;background:var(--ink);color:var(--bg);opacity:0;visibility:hidden;pointer-events:none;border-radius:.4rem;margin:0;padding:.6rem 1rem;font-size:.85rem;font-weight:600;transition:opacity .15s,visibility .15s;position:absolute;inset-block-start:-.25rem}.message.is-visible{opacity:1;visibility:visible}.board{aspect-ratio:5/6;grid-template-rows:repeat(6,1fr);gap:5px;inline-size:min(88vw,21rem);display:grid}.board__row{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}--shake.board__row{animation:.5s shake}.tile{text-transform:uppercase;color:var(--ink);border:2px solid var(--tile-empty-border);background:var(--bg);-webkit-user-select:none;user-select:none;place-items:center;font-size:clamp(1.4rem,7vw,2rem);font-weight:700;transition:border-color .1s,transform .1s;display:grid}.tile[data-state=tbd]{border-color:var(--tile-border)}.tile.tile--filled{animation:.1s pop}.tile[data-state=absent]{background:var(--absent);border-color:var(--absent);color:#fff}.tile[data-state=present]{background:var(--present);border-color:var(--present);color:#fff}.tile[data-state=correct]{background:var(--correct);border-color:var(--correct);color:#fff}.tile.tile--flip{animation:.5s forwards flip;animation-delay:var(--flip-delay,0s)}.tile.tile--win{animation:.5s bounce;animation-delay:var(--bounce-delay,0s)}@keyframes pop{0%{transform:scale(.9)}40%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.keyboard{justify-self:center;gap:8px;inline-size:min(96vw,30rem);padding-inline:.5rem;display:grid}.keyboard__row{justify-content:center;gap:6px;display:flex}.key{block-size:3.5rem;min-inline-size:0;font:inherit;text-transform:uppercase;color:var(--key-ink);background:var(--key-bg);cursor:pointer;border:none;border-radius:.3rem;flex:1;place-items:center;font-size:.8rem;font-weight:700;transition:background .15s,color .15s;display:grid}--wide.key{flex:1.5;font-size:.7rem}.key[data-state=absent]{background:var(--absent);color:#fff}.key[data-state=present]{background:var(--present);color:#fff}.key[data-state=correct]{background:var(--correct);color:#fff}.key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stats{background:var(--surface);inline-size:min(92vw,24rem);color:var(--ink);border:1px solid var(--line);border-radius:1rem;margin:auto;padding:1.75rem 1.5rem 1.5rem;position:relative}.stats::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080}.stats[open]{opacity:1;transition:opacity .2s,translate .2s;translate:0}@starting-style{.stats[open]{opacity:0;translate:0 12px}}.stats__close{block-size:2rem;inline-size:2rem;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:.4rem;place-items:center;display:grid;position:absolute;inset-block-start:.75rem;inset-inline-end:.75rem}.stats__close:hover{color:var(--ink)}.stats__close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stats__headline{text-align:center;letter-spacing:.08em;text-transform:uppercase;margin:0 0 .25rem;font-size:1.1rem}.stats__answer{text-align:center;letter-spacing:.25em;text-transform:uppercase;min-block-size:1.2rem;color:var(--accent);margin:0 0 1rem;font-size:1.1rem;font-weight:700}.stats__grid{grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 1.5rem;display:grid}.stats__cell{text-align:center}.stats__cell dt{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700}.stats__cell dd{color:var(--muted);margin:.15rem 0 0;font-size:.65rem;line-height:1.2}.stats__subhead{text-align:center;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .75rem;font-size:.85rem}.distribution{gap:.35rem;margin-block-end:1.25rem;display:grid}.dist__row{grid-template-columns:1rem 1fr;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;display:grid}.dist__label{text-align:center}.dist__bar{background:var(--muted);block-size:1.3rem;min-inline-size:1.5rem;color:var(--bg);font-variant-numeric:tabular-nums;border-radius:.2rem;justify-content:flex-end;align-items:center;padding-inline-end:.4rem;display:flex}--current.dist__bar{background:var(--correct);color:#fff}.share{inline-size:100%;font:inherit;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--correct);cursor:pointer;border:none;border-radius:.5rem;padding:.8rem;font-size:.95rem;font-weight:700}.share[hidden]{display:none}.share:hover{background:var(--correct)}@supports (color:color-mix(in lab,red,red)){.share:hover{background:color-mix(in oklab,var(--correct) 85%,black)}}.share:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.share__feedback{text-align:center;min-block-size:1rem;color:var(--muted);opacity:0;margin:.6rem 0 0;font-size:.75rem;transition:opacity .15s}.share__feedback.is-visible{opacity:1}@media(prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}