:root{--bg: #0f0f0f;--bg-secondary: #1a1a1a;--text: #d1d0c5;--text-primary: #d1d0c5;--text-muted: #646669;--text-dim: #3c3d41;--text-extra-muted: #4a4b4f;--accent: #e2b714;--error: #ca4754;--success: #6db33f;--font: "JetBrains Mono", "Roboto Mono", monospace;--transition: .15s ease;color-scheme:dark}[data-theme=light]{--bg: #f5f4ef;--bg-secondary: #eae8e2;--text: #2c2b27;--text-primary: #2c2b27;--text-muted: #72706c;--text-dim: #c0bdb6;--text-extra-muted: #a8a6a1;--accent: #b8920a;--error: #ca4754;--success: #5a9e2f;color-scheme:light}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background-color:var(--bg)}body{background-color:var(--bg);color:var(--text);font-family:var(--font);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}.app{min-height:100vh;display:flex;flex-direction:column}.screen-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background-color:var(--bg)}.app-name{font-size:.75rem;font-weight:400;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);margin-bottom:3rem}.progress-bar-track{position:fixed;top:0;left:0;width:100%;height:2px;background-color:transparent;z-index:100}.progress-bar-fill{height:100%;background-color:var(--accent);transition:width .3s ease}.setup-container{width:100%;max-width:620px;display:flex;flex-direction:column;gap:1.25rem}.setup-row{display:flex;gap:1rem}.setup-row .field{flex:1}@media (max-width: 500px){.setup-row{display:grid;grid-template-columns:1fr 1fr}.setup-row .field:nth-child(3){grid-column:1 / -1}}.field{display:flex;flex-direction:column;gap:.4rem}.field label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted)}select,textarea,input[type=text],input[type=url]{background-color:var(--bg);border:none;border-bottom:1px solid var(--text-dim);color:var(--text);font-family:var(--font);font-size:.9rem;padding:.5rem 0;width:100%;outline:none;transition:border-color var(--transition);-moz-appearance:none;appearance:none;-webkit-appearance:none}select{cursor:pointer;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23646669'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .25rem center;padding-right:1.5rem}select:focus,textarea:focus,input[type=text]:focus,input[type=url]:focus{border-bottom-color:var(--accent)}select option{background-color:var(--bg);color:var(--text)}textarea{resize:vertical;min-height:120px;line-height:1.6}.input-mode-toggle{display:flex;gap:1.5rem;font-size:.75rem;color:var(--text-muted)}.input-mode-toggle button{background:none;border:none;color:var(--text-muted);font-family:var(--font);font-size:.75rem;cursor:pointer;padding:0;letter-spacing:.1em;transition:color var(--transition)}.input-mode-toggle button.active{color:var(--accent)}.input-mode-toggle button:hover{color:var(--text)}.btn-primary{background:none;border:1px solid var(--text-dim);color:var(--text-muted);font-family:var(--font);font-size:.85rem;letter-spacing:.2em;padding:.65rem 2rem;cursor:pointer;transition:border-color var(--transition),color var(--transition);align-self:flex-start;margin-top:.5rem}.btn-primary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-primary:disabled{opacity:.3;cursor:not-allowed}.translation-container{width:100%;max-width:750px;display:flex;flex-direction:column}.sentence-counter{position:fixed;top:1.5rem;right:2rem;font-size:.7rem;color:var(--text-muted);letter-spacing:.1em}.source-sentence{font-size:1.6rem;font-weight:300;color:var(--text);line-height:1.5;margin-bottom:3rem;animation:fadeSlideIn .25s ease}.translation-input-wrapper{display:flex;flex-direction:column;gap:.5rem}.translation-input{background:transparent;border:none;border-bottom:2px solid var(--text-dim);color:var(--text);font-family:var(--font);font-size:1.1rem;padding:.5rem 0;width:100%;outline:none;transition:border-color var(--transition),opacity var(--transition)}.translation-input:focus{border-bottom-color:var(--accent)}.translation-input.loading{opacity:.4}.translation-input::placeholder{color:var(--text-dim)}.submit-hint{font-size:.7rem;color:var(--text-dim);letter-spacing:.08em}.feedback-container{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem;animation:fadeIn .3s ease}.feedback-ideal{color:var(--accent);font-size:1rem;line-height:1.6}.feedback-ideal-label{font-size:.65rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:.25rem}.feedback-text{color:var(--text-muted);font-size:.85rem;line-height:1.6}.feedback-correct{color:var(--success);font-size:.85rem}.feedback-next{margin-top:.5rem;font-size:.7rem;color:var(--text-dim);letter-spacing:.1em}.inline-error{color:var(--error);font-size:.8rem;margin-top:.5rem;animation:fadeIn .2s ease}.complete-container{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.complete-title{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-muted)}.complete-stat{font-size:3rem;font-weight:300;color:var(--accent);line-height:1}.complete-label{font-size:.8rem;color:var(--text-muted);margin-top:-1rem}.btn-ghost{background:none;border:none;color:var(--text-muted);font-family:var(--font);font-size:.8rem;letter-spacing:.15em;cursor:pointer;padding:0;transition:color var(--transition);margin-top:1rem}.btn-ghost:hover{color:var(--accent)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes screenFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.screen-fade{flex:1;display:flex;flex-direction:column;animation:screenFadeIn .2s ease both}@media (max-width: 768px){body{font-size:16px}.screen-center{padding:4rem 1.25rem 1.25rem;justify-content:flex-start}.setup-container{max-width:100%}.setup-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.setup-row .field:nth-child(3){grid-column:1 / -1}.app-name{margin-bottom:2rem}.translation-container{max-width:100%;padding:0 .5rem}.input-mode-toggle{gap:1rem;font-size:.7rem;flex-wrap:wrap}}