/* CCReveal motion: 320 ms, zero overshoot, 70 ms between sections. */
.order-panel,.lab-panel,.collection{animation:cc-reveal var(--duration) var(--reveal) both}
.lab-panel{animation-delay:70ms}
.collection{animation-delay:140ms}
@keyframes cc-reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.drop-stream{position:absolute;left:152px;top:166px;height:75px;width:12px;z-index:3;opacity:0;pointer-events:none}
.drop-stream i{position:absolute;top:0;left:3px;width:8px;height:12px;background:var(--gel);border-radius:50% 50% 55% 55%;box-shadow:inset 2px 0 0 #ffffff45;transform:translateY(calc(var(--drop-1,0) * 70px));opacity:clamp(0,calc(var(--drop-1,0) * 5),1)}
.drop-stream i:nth-child(2){transform:translateY(calc(var(--drop-2,.33) * 70px));opacity:clamp(0,calc(var(--drop-2,.33) * 5),1)}
.drop-stream i:nth-child(3){transform:translateY(calc(var(--drop-3,.66) * 70px));opacity:clamp(0,calc(var(--drop-3,.66) * 5),1)}
.pouring .drop-stream,.settling .drop-stream{opacity:1}
.pouring .pipette{transform:rotate(4deg) translate(-3px,5px)}
.pouring .bulb{transform:translateY(5px) scaleY(.93);transform-origin:60px 70px}
.settling .pipette{transform:rotate(9deg) translate(2px,-4px)}
.combo-badge{position:absolute;right:24px;top:24px;z-index:4;background:var(--card);color:var(--primary);font-size:var(--sm);padding:8px 12px;border:.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.combo-badge b{font-size:var(--base);margin-left:8px}
.particles{position:absolute;inset:0;pointer-events:none;z-index:6}
.particle{position:absolute;left:50%;top:57%;width:12px;height:12px;border-radius:50%;background:var(--gel);animation:splash .75s var(--reveal) forwards;box-shadow:inset 2px 2px 0 #ffffff40}
.particle.confetti{border-radius:2px;background:var(--particle-color);width:7px;height:13px;top:50%;animation:confetti 1.3s ease-out forwards}
@keyframes splash{to{transform:translate(var(--px),var(--py)) scale(.2);opacity:0}}
@keyframes confetti{to{transform:translate(var(--px),var(--py)) rotate(var(--rotation));opacity:0}}
.stage-message.success,.stage-message.perfect{color:var(--primary);font-weight:600}
.stage-message.error{color:var(--destructive)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-button{background:transparent;color:var(--muted);display:block;padding:12px 8px;font-size:var(--sm);margin:8px auto 0;min-height:44px}
dialog{border:.5px solid var(--border);border-radius:28px;padding:32px;max-width:480px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);background:var(--card);color:var(--foreground);box-shadow:0 24px 80px #18181b26;text-align:center;overflow:auto}
dialog[open]{animation:cc-reveal var(--duration) var(--reveal) both}
dialog::backdrop{background:#18181b55;backdrop-filter:blur(8px)}
dialog h2{font-size:var(--lg);line-height:1.5;margin:0 0 16px;letter-spacing:-.5px}
dialog p{font-size:var(--sm);line-height:1.8;color:var(--muted)}
.dialog-close{position:absolute;right:12px;top:12px}
#help-dialog h2{padding-right:32px;text-align:left}
dialog ol{text-align:left;padding-left:24px;margin:24px 0}
dialog li{padding-left:8px;margin:16px 0;color:var(--primary);font-size:var(--base)}
dialog li b{font-size:var(--base);color:var(--foreground)}
dialog li p{margin:4px 0}
.result-stats{display:flex;justify-content:space-between;gap:16px;padding:20px 0;margin:24px 0;border-top:.5px solid var(--border);border-bottom:.5px solid var(--border)}
.result-stats span{display:block;font-size:var(--sm);color:var(--muted);margin-bottom:8px}
.result-stats b{font-size:var(--lg);font-weight:600;font-variant-numeric:tabular-nums}
.free .target-band,.free .target-line{display:none}
.free .session-stats{display:none}
@media(max-width:1100px){
  .shell{padding:0 24px}.header{gap:16px}.brand-en,.best{display:none}
  .workspace{grid-template-columns:248px minmax(0,1fr);gap:24px}
  .ticket{padding:16px}.order-name{gap:8px}.order-name h2{font-size:var(--base)}
  .tools{flex-direction:column;align-items:stretch;gap:16px;padding:20px 24px}
  .palette-group,.pour-group{display:flex;justify-content:space-between;align-items:center;gap:16px}
  .tool-label{margin:0}.pour-button{min-width:232px}.collection-grid{gap:8px}
  .collection-cell{padding:6px 6px 10px;border-radius:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  button:active:not(:disabled),.pour-button[data-phase="pouring"]{transform:none}
  .drop-stream i{transform:translateY(15px)}.drop-stream i:nth-child(2){transform:translateY(35px)}.drop-stream i:nth-child(3){transform:translateY(55px)}
}