:root{color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0f0f1a;color:#e8e8f0}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 2rem;gap:1.5rem}.header{text-align:center;width:100%;max-width:700px}.header h1{font-size:1.8rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#f1c40f,#e67e22,#e74c3c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.stats{display:flex;align-items:center;justify-content:center;gap:1rem}.moves{font-size:.95rem;color:#fff9;font-variant-numeric:tabular-nums}.btn{padding:.4rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:.5rem;background:#ffffff0f;color:#e8e8f0;font-size:.85rem;cursor:pointer;transition:all .15s}.btn:hover{background:#ffffff1f;border-color:#ffffff40}.btn-accent{background:linear-gradient(135deg,#f1c40f,#e67e22);color:#0f0f1a;border:none;font-weight:600}.btn-accent:hover{opacity:.9;background:linear-gradient(135deg,#f1c40f,#e67e22)}.win-banner{display:flex;align-items:center;gap:1rem;padding:.8rem 1.5rem;background:linear-gradient(135deg,#27ae6026,#2ecc7114);border:1px solid rgba(39,174,96,.3);border-radius:.75rem;animation:pop-in .4s ease}.win-banner span{font-size:1rem;font-weight:600;color:#2ecc71}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.tube-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;max-width:700px;width:100%;padding:0 .5rem}.tube-wrapper{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .15s;user-select:none;-webkit-user-select:none}.tube-wrapper:hover{transform:translateY(-4px)}.tube-wrapper.selected{transform:translateY(-10px)}.tube-wrapper.sorted .tube{box-shadow:0 0 16px #27ae6066,inset 0 0 6px #27ae6026;border-color:#27ae6080}.tube{width:56px;height:170px;border:2px solid rgba(255,255,255,.18);border-top:none;border-radius:0 0 10px 10px;display:flex;flex-direction:column-reverse;overflow:hidden;background:#ffffff08;position:relative;transition:box-shadow .2s,border-color .2s}.tube:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff26;border-radius:0 0 2px 2px}.tube-base{width:64px;height:6px;background:#ffffff1a;border-radius:0 0 4px 4px;margin-top:-1px}.layer{flex:1;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s,opacity .2s;border-bottom:1px solid rgba(0,0,0,.15)}.layer:first-child{border-bottom:none}.ingredient-label{font-size:.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#00000080;text-shadow:0 1px 2px rgba(255,255,255,.2);pointer-events:none}.pouring-out{animation:pour-out .2s ease forwards}.pouring-in{animation:pour-in .2s ease forwards}@keyframes pour-out{0%{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}@keyframes pour-in{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.empty-hint{flex:1;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:#ffffff26;text-transform:uppercase;letter-spacing:.1em}.instructions{text-align:center;max-width:400px}.instructions p{font-size:.8rem;color:#ffffff59;margin-bottom:.25rem}@media(max-width:500px){.tube{width:44px;height:140px}.tube-base{width:52px}.tube-grid{gap:.5rem}.ingredient-label{font-size:.4rem}}