*{min-height:0}#root{display:grid;height:30em;width:clamp(40em,60%,50em);grid-template-columns:auto 1fr;grid-template-rows:auto auto;grid-auto-flow:column;row-gap:1em;column-gap:3em}h1,#buttons{align-self:end}#input,#results-and-error{align-self:start}h1{margin:0}h2{margin-top: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)}#info{overflow-y:auto}#buttons{display:grid;grid-template-columns:2fr 1fr;gap:1em;position:relative;inset:0 auto auto 0}#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}#buttons #info-toggle{display:block;padding:0;width:3em;height:3em;text-decoration:none;position:absolute;left:calc(1em + 100%);color:#ffffff80}#buttons #info-toggle.showing-info{color:#fff}#buttons #info-toggle.showing-info:not(:hover){background:#ffffff1a}#results-and-error{display:flex;flex-flow:column nowrap;gap:1em;height:100%}#results,#error{padding:1em 2em;min-height:auto}#results{display:flex;flex-flow:row wrap;justify-content:center;gap:.5em;background:#00000080;overflow-y:auto}#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: rgb(15 15 30);--fg: #f0f0f0;--l-selected: oklch(.25 .02 250);--l-blank: oklch(.1 .05 250);--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;text-align:center}