:root{--bg-color: #111827;--text-color: #f3f4f6;--primary-color: #57b42e;--primary-hover: #418f21;--primary-active: #336e1d;--primary-text: #f3f4f6;--secondary-color: #1f90ff;--secondary-hover: #086fff;--secondary-active: #0157f4;--secondary-text: #f3f4f6;--gray-color: #374151;--gray-hover: #1f2937;--gray-active: #111827;--gray-text: #e5e7eb;--border-radius: 4px;--transition-speed: .2s}*{box-sizing:border-box}html{color:var(--text-color)}body{height:100dvh;padding:32px 16px;margin:0;background-color:var(--bg-color)}#app{width:100%;height:100%}.button{display:inline-block;padding:.6em 1.2em;font-size:1rem;font-weight:600;text-align:center;text-decoration:none;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color var(--transition-speed),color var(--transition-speed)}.button--small{padding:.4em 1em;font-size:.8rem}.button--medium{padding:.6em 1.2em;font-size:1rem}.button--large{padding:.8em 1.6em;font-size:1.25rem}.button--primary{background-color:var(--primary-color);color:var(--primary-text)}.button--primary:hover:not(:disabled){background-color:var(--primary-hover)}.button--primary:active:not(:disabled){background-color:var(--primary-active)}.button--secondary{background-color:var(--secondary-color);color:var(--secondary-text)}.button--secondary:hover:not(:disabled){background-color:var(--secondary-hover)}.button--secondary:active:not(:disabled){background-color:var(--secondary-active)}.button--gray{background-color:var(--gray-color);color:var(--gray-text)}.button--gray:hover:not(:disabled){background-color:var(--gray-hover)}.button--gray:active:not(:disabled){background-color:var(--gray-active)}.button:disabled{opacity:.6;cursor:not-allowed}.header{display:flex;justify-content:flex-end;gap:1rem}.info{display:flex;flex-wrap:wrap;max-height:320px;overflow-y:auto;gap:1rem}.word-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));column-gap:1.7rem;width:100%;list-style:none;margin:0 auto;padding:8px 0}.word-list-item{break-inside:avoid;line-height:1.5}.word{font-size:20px;font-weight:700;color:var(--text-color)}.gender{color:var(--secondary-color);font-size:smaller;font-style:italic;margin-left:.2rem}.keyboard{display:grid;grid-template-rows:repeat(5,1fr);gap:.5rem}.row{width:100%;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem}.input{width:100%;aspect-ratio:1 / 1;text-align:center;font-size:32px;font-weight:700;border:1px solid var(--primary-color);border-radius:var(--border-radius);outline:none;color:var(--text-color);background-color:var(--bg-color);transition:background-color var(--transition-speed),border-color var(--transition-speed),color var(--transition-speed)}.input--correct{background-color:var(--primary-color);border-color:var(--primary-color);color:var(--primary-text)}.input--present{background-color:color-mix(in srgb,var(--secondary-color) 70%,transparent);border-color:var(--secondary-color);color:var(--secondary-text)}.input--absent{background-color:var(--gray-color);border-color:var(--gray-color);color:var(--gray-text)}.overlay{position:fixed;z-index:1000;top:0;left:0;width:100%;height:100dvh;background-color:#00000080;display:flex;align-items:center;justify-content:center}.overlay--closed{display:none}.popup{display:flex;flex-direction:column;background-color:var(--bg-color);gap:1rem;border-radius:8px;box-shadow:0 2px 10px #0000004d;padding:16px}.page-wrapper{display:flex;flex-direction:column;justify-content:space-between;width:100%;max-width:390px;height:100%;overflow-y:auto;margin:0 auto}