#root{display:grid;width:60%;grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-auto-flow:column;row-gap:1em;column-gap:3em}h1{margin:0}#input{display:flex;flex-flow:column nowrap;--gap: 5px;gap:var(--gap)}.word{display:flex;flex-flow:row nowrap;gap:var(--gap)}.letter{aspect-ratio:1;width:3.5rem;font-family:var(--font-3);font-size:1.5rem;font-weight:800;display:grid;place-items:center;box-sizing:border-box;border-style:solid;--color: var(--l-blank);--border-opacity: .15;background:var(--color);border-color:rgb(from var(--fg) r g b / var(--border-opacity));border-width:2px}.word:is(.active,.invalid) .letter{--border-opacity: .3;background:var(--l-selected)}.word:is(.active,.invalid) .letter.active{--border-opacity: .8 !important;border-color:var(--fg)}.word:is(.active,.invalid) .letter:is(.yellow,.green){border-color:oklch(from var(--color) .9 c h / var(--border-opacity));background:oklch(from var(--color) calc(l*.7) calc(c/2) h)}.word.invalid{color:color-mix(in oklab,var(--fg),var(--bg) 30%)}.yellow{--color: var(--l-yellow)}.green{--color: var(--l-green)}#buttons{display:grid;grid-template-columns:2fr 1fr;gap:1em}#buttons button{font-family:var(--font-3);font-size:1.2em;font-weight:600;text-decoration:underline;display:block;padding:1rem 0;text-align:center;background:#000}#buttons button:hover{background:#64d1d733}#results-and-error{display:flex;flex-flow:column nowrap;gap:1em}#results,#error{padding:1em 2em}#results{display:flex;flex-flow:row wrap;justify-content:center;gap:.5em;background:#00000080}#error{text-align:center;background:oklch(from var(--bg) l 80% 10deg)}#results{font-family:var(--font-1)}.result-item{padding:.25em .5em;background:#ffffff1a}#result-overflow{padding:.25em 0 .25em .5em;opacity:.8;font-style:italic}#mismatches{position:fixed;inset:1em auto auto 1em;background:#000c;display:grid;grid-template-columns:1fr 1fr;gap:1em;font-family:monospace}#mismatches span:is(.yellow,.green){background:var(--color)}#mismatches>:first-child{color:red;grid-column:1 / 3}button{all:unset}:root{--bg: #111111;--fg: #f0f0f0;--l-selected: oklch(.3 0 0);--l-blank: black;--l-yellow: oklch(60% 45% 92deg);--l-green: oklch(55% 45% 138deg);--font-1: "Libre Baskerville";--font-2: "Source Code Pro";--font-3: "DM Sans"}:root{font-family:var(--font-1);line-height:1.5;font-weight:400;color-scheme:dark;background:var(--bg);color:var(--fg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;flex-flow:row nowrap;place-items:center;place-content:center;gap:2em;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}