:root{--accent:#54af49;--accent-dim:#3d8436;--accent-glow:#54af4940;--text:#fefffe;--text-muted:#a8b8a7;--bg:#2b1613;--bg-secondary:#1e0f0d;--surface:#371c18;--surface-alt:#311a16;--wrong:#e05252;--wrong-bg:#e052522e;--correct:var(--accent);--correct-bg:#54af492e;--radius:1rem;--radius-sm:.75rem;--radius-lg:1.25rem;--radius-full:999px;--border:1px solid #54af4933;--border-hover:#54af4973;--transition:.2s ease;--shadow:0 4px 20px #54af494d;--shadow-hover:0 6px 28px #54af4973;--accent-gradient:linear-gradient(135deg, var(--accent), var(--accent-dim));--bg-gradient:radial-gradient(ellipse 60% 40% at 50% -10%, #54af491f 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 80% 110%, #54af4912 0%, transparent 60%)}@media (prefers-color-scheme:light){:root{--accent:#45a043;--accent-dim:#2d7c2f;--accent-glow:#45a04333;--text:#1a1a1a;--text-muted:#666;--bg:#f5f5f5;--bg-secondary:#efefef;--surface:#fff;--surface-alt:#f0f0f0;--wrong:#d63333;--wrong-bg:#d633331f;--correct-bg:#45a04326;--bg-gradient:radial-gradient(ellipse 60% 40% at 50% -10%, #45a04314 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 80% 110%, #45a0430d 0%, transparent 60%)}.modal-overlay{background:#ffffffb3}#loading-screen{background:#ffffffd9}.footer{background:#ffffffe6}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--text);background:var(--bg-gradient), var(--bg);padding:1rem .75rem 2rem;font-family:Open Sans,sans-serif}h2{text-align:center;margin:.5rem}.loading-text{text-align:center;animation:4s linear infinite textLoading}@keyframes textLoading{0%,50%,to{padding:0}25%{padding-left:4rem}75%{padding-right:4rem}}.loading-text-error{text-align:center}html::scroll-marker{display:none}html::-webkit-scrollbar{display:none}.wrap{flex-direction:column;gap:8px;margin-bottom:2rem;padding:1rem 0;transition:all .2s;display:flex}@keyframes openWrap{0%{margin-top:-50%;transform:scaleY(0)}to{margin-top:0;transform:scaleY(1)}}header{text-align:center;margin-bottom:1.25rem;padding:1rem .5rem .75rem}@scope(header){.logo-text{letter-spacing:.04em;color:var(--accent);font:900 clamp(1.1rem,5vw,1.6rem) Unbounded,sans-serif;animation:5s ease-in-out infinite header;display:block}@keyframes header{0%,to{text-shadow:0 0 1rem var(--accent)}50%{text-shadow:0 0 4rem var(--accent)}}.subtitle{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-top:.3rem;font-size:.78rem}}@scope(.start-screen){.category-grid{gap:.75rem;margin-block:1rem;display:grid}.category-item{text-align:center;color:var(--text);background:var(--surface-alt);border:var(--border);cursor:pointer;border-radius:.9rem;padding:.9rem .8rem;font-weight:600;transition:all .15s}.category-item:hover{border-color:var(--border-hover);background:#54af4914}.category-item:active{transform:scale(.98)}.category-item.selected{border-color:var(--accent);background:#54af4929;animation:2s ease-in-out infinite select}@keyframes select{0%,to{box-shadow:0 0 0 0 var(--accent)}50%{box-shadow:0 0 .75rem 0 var(--accent)}}}@scope(.modal-overlay){.modal-content{background:var(--surface);border:var(--border);border-radius:var(--radius-lg)}#name-input{border:var(--accent) 1px solid;border-radius:30rem;outline:none;width:100%;margin-top:.5rem;padding:.5rem .5rem .5rem 2rem;font-size:1rem}#name-input::placeholder{text-align:left;color:var(--accent);padding-left:2rem}.modal-content{padding:1rem}h3{text-align:center;text-wrap-style:balance}}@scope(#quiz-screen){.progress-wrap{margin-bottom:1.25rem}.progress-info{color:var(--text-muted);justify-content:space-between;margin-bottom:.4rem;font-size:.75rem;display:flex}.progress-bar-bg{background:var(--surface);border-radius:var(--radius-full);height:5px;overflow:hidden}.progress-bar-fill{border-radius:inherit;background:linear-gradient(90deg, var(--accent-dim), var(--accent));height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}.card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);margin-bottom:1rem;padding:1.25rem 1rem 1rem;animation:.3s slide-in}.question-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;font-size:.65rem}.question-text{font-size:clamp(.95rem,4vw,1.1rem);font-weight:700;line-height:1.45}.options{flex-direction:column;gap:.55rem;margin-top:1.25rem;list-style:none;display:flex}.option-label{background:var(--surface-alt);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--transition), border-color var(--transition), transform .15s;border:1.5px solid #54af4926;border-radius:.85rem;align-items:center;gap:.75rem;padding:.85rem 1rem;display:flex}.option-label:hover{border-color:var(--border-hover);background:#54af4914}.option-label:active{transform:scale(.98)}.option-label.selected{border-color:var(--accent);background:#54af4914;animation:2s ease-in-out infinite select}@keyframes select{0%,to{box-shadow:0 0 0 0 var(--accent)}50%{box-shadow:0 0 .75rem 0 var(--accent)}}.option-label.correct{border-color:var(--correct);background:var(--correct-bg)}.option-label.wrong{border-color:var(--wrong);background:var(--wrong-bg)}input[type=radio]{display:none}.option-dot{aspect-ratio:1;width:20px;transition:border-color var(--transition), background var(--transition);border:2px solid #54af4966;border-radius:50%;place-items:center;display:grid}.option-dot:after{content:"";aspect-ratio:1;border-radius:inherit;background:var(--accent);opacity:0;width:9px;transition:opacity var(--transition)}input[type=radio]:checked~.option-dot{border-color:var(--accent);background:#54af491a}input[type=radio]:checked~.option-dot:after{opacity:1}}#results-screen{margin-bottom:3rem}@scope(#results-screen){.loading-screen{justify-content:center;align-items:center;display:flex}.loading-content{text-align:center}.ring-score{text-align:center;font-size:2rem}.result-msg{text-align:center}.send-status{text-align:center;translate:6s;height:min-content;max-height:0;margin-block:.75rem;font-size:.75rem}.send-status.load{color:var(--text-muted)}.send-status.send{color:var(--accent)}.mistakes-title{text-align:center;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-block:1rem;font-size:1rem}.mistake-card{background:var(--surface);border:var(--border);border-radius:var(--radius-lg);margin-bottom:.5rem;padding:1rem}.mistake-q{font-size:1.25rem;font-weight:600}.mistake-row{border:var(--border);margin-top:.5rem;border-radius:1rem;margin-inline:-.5rem;padding:.5rem}.badge{margin-right:.5rem}.badge-wrong,.mistake-wrong-text{color:var(--wrong)}.badge-correct,.mistake-correct-text{color:var(--correct)}}.cat-block{border-radius:var(--radius);background:var(--surface);border:1px solid #54af4933;border:var(--border);border-radius:var(--radius-lg);overflow:hidden}.cat-header{background:var(--bg-card);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:1rem;display:flex}.cat-header:hover{background:#3f2320}.cat-title{color:var(--accent-dim);font-size:1.25rem;font-weight:700}.cat-arrow{width:20px;height:20px;color:var(--text-muted);justify-content:center;align-items:center;font-size:12px;transition:transform .25s;display:flex}.cat-arrow.open{transform:rotate(180deg)}.cat-body{background:var(--bg2);max-height:0;transition:all 1s}.cat-body.open{max-height:9000px;transition:all 8s}.drink-block{background:var(--bg-option);border-top:1px solid #ffffff0d}.drink-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:12px 18px;display:flex}.drink-header:hover{background:#ffffff08}.drink-name{color:var(--text);font-size:15px;font-weight:500}.drink-arrow{width:18px;height:18px;color:var(--text-muted);justify-content:center;align-items:center;font-size:11px;transition:transform .25s;display:flex}.drink-arrow.open{transform:rotate(180deg)}.drink-body{max-height:0;padding:0 18px;transition:all .15s;overflow:hidden}.drink-body.open{max-height:9999px;transition:all .75s}.preparation{color:var(--text-muted);border-left:3px solid var(--accent-dim);background:#54af4914;border-radius:0 8px 8px 0;margin-bottom:14px;padding:10px 14px;font-size:13px;line-height:1.5;transition:all .5s ease-in-out}.prep-label{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:4px;font-size:.65rem;font-weight:500}.sizes-tabs{flex-wrap:wrap;gap:6px;margin-bottom:14px;display:flex}.size-tab{cursor:pointer;color:var(--text-muted);background:0 0;border:1px solid #54af494d;border-radius:2rem;padding:6px 14px;font-size:13px;transition:all .15s}.size-tab:hover{border-color:var(--accent);color:var(--text)}.size-tab.active{background:var(--accent);border-color:var(--accent);color:#1a0e0c;font-weight:500}.ingredients{flex-direction:column;gap:6px;display:flex}.ing-row{background:var(--bg-card);border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.ing-name{color:var(--text)}.ing-amount{color:var(--accent);font-weight:500}.cat-arrow,.drink-arrow{justify-content:center;align-items:center;font-size:1rem;transition:transform .3s;display:flex}.cat-arrow.open,.drink-arrow.open{transform:rotate(180deg)}.footer{inset-inline:0;text-align:center;color:var(--text);border-top:1px solid var(--accent);-webkit-backdrop-filter:blur(2rem);backdrop-filter:blur(2rem);padding:.5rem;position:fixed;bottom:0}.footer a{color:inherit}.btn,.btn-next,.btn-start,.btn-confirm,.btn-recipes,.btn-back,.btn-save{letter-spacing:.04em;cursor:pointer;width:100%;color:var(--bg);background:var(--accent-gradient);box-shadow:var(--shadow);transition:transform .15s, opacity var(--transition), box-shadow var(--transition);-webkit-tap-highlight-color:transparent;border:0;border-radius:2rem;margin-top:1rem;padding:1rem;font:700 clamp(.85rem,3.5vw,1rem) Unbounded,sans-serif}.btn:hover{opacity:.9;box-shadow:var(--shadow-hover)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}