.pattern-preview.error-shake-preview{--shake-amplitude:8px;--shake-duration:360ms;--shake-accent:rgba(248,113,113,0.95);display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:18px;height:180px;overflow:hidden;isolation:isolate}.pattern-preview.error-shake-preview.pattern-preview--inspector{height:auto;min-height:240px;padding:24px;gap:.6rem}.error-shake-preview__label{font-size:.72rem;color:rgba(226,232,240,.7);letter-spacing:.04em;text-transform:uppercase}.error-field{border:1px solid rgba(148,163,184,.35);border-radius:10px;background:rgba(15,23,42,.65);transition:border-color .18s ease}.error-field[data-state=invalid]{border-color:var(--shake-accent)}.error-field--jitter[data-state=shaking]{animation:errorJitter var(--shake-duration) cubic-bezier(.36,.07,.19,.97) both}.error-field--pulse[data-state=shaking]{animation:errorPulse var(--shake-duration) ease-in-out both}.error-field--bump[data-state=shaking]{animation:errorBump var(--shake-duration) cubic-bezier(.36,.07,.19,.97) both}@keyframes errorJitter{10%,90%{transform:translateX(calc(-.3 * var(--shake-amplitude)))}20%,80%{transform:translateX(calc(.6 * var(--shake-amplitude)))}30%,50%,70%{transform:translateX(calc(-1 * var(--shake-amplitude)))}40%,60%{transform:translateX(var(--shake-amplitude))}}@keyframes errorPulse{0%,to{box-shadow:0 0 0 0 rgba(239,68,68,0)}30%{box-shadow:0 0 0 calc(var(--shake-amplitude) * .5) rgba(239,68,68,.7)}50%{box-shadow:0 0 0 calc(var(--shake-amplitude) * .25) rgba(239,68,68,.4)}75%{box-shadow:0 0 0 var(--shake-amplitude) rgba(239,68,68,.85)}}@keyframes errorBump{0%,to{transform:translateY(0)}20%{transform:translateY(calc(-.5 * var(--shake-amplitude)))}45%,60%{transform:translateY(var(--shake-amplitude))}80%{transform:translateY(calc(-.2 * var(--shake-amplitude)))}}.error-shake-preview__input{width:100%;border:none;background:transparent;color:rgba(241,245,249,.95);padding:.55rem .75rem;font-size:.85rem;font-family:inherit;outline:none}.error-shake-preview__input::placeholder{color:rgba(148,163,184,.55)}.error-shake-preview__input:-moz-read-only{cursor:default}.error-shake-preview__input:read-only{cursor:default}.error-shake-preview__hint{margin:0;font-size:.75rem;color:var(--shake-accent);min-height:1.2em;line-height:1.3}.error-shake-preview__controls{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}.error-shake-preview__button{border:1px solid rgba(148,163,184,.35);background:rgba(15,23,42,.6);color:rgba(226,232,240,.92);padding:.4rem .8rem;border-radius:999px;font-size:.78rem;font-weight:600;cursor:pointer;transition:border-color .18s ease,background .18s ease}.error-shake-preview__button:focus-visible,.error-shake-preview__button:hover{border-color:rgba(239,68,68,.55);background:rgba(30,41,59,.85);outline:none}.error-shake-preview--horizontal:not(.pattern-preview--inspector) .error-field{animation:stageJitter 2.4s cubic-bezier(.36,.07,.19,.97) infinite}.error-shake-preview--pulse:not(.pattern-preview--inspector) .error-field{animation:stagePulse 2.4s ease-in-out infinite}.error-shake-preview--vertical:not(.pattern-preview--inspector) .error-field{animation:stageBump 2.4s cubic-bezier(.36,.07,.19,.97) infinite}@keyframes stageJitter{0%,70%,to{transform:translateX(0)}72%{transform:translateX(calc(-.5 * var(--shake-amplitude)))}74%{transform:translateX(calc(.6 * var(--shake-amplitude)))}76%{transform:translateX(calc(-1 * var(--shake-amplitude)))}78%{transform:translateX(var(--shake-amplitude))}80%{transform:translateX(calc(-.4 * var(--shake-amplitude)))}82%{transform:translateX(calc(.2 * var(--shake-amplitude)))}}@keyframes stagePulse{0%,65%,to{box-shadow:0 0 0 0 rgba(239,68,68,0)}72%{box-shadow:0 0 0 calc(var(--shake-amplitude) * .5) rgba(239,68,68,.65)}77%{box-shadow:0 0 0 calc(var(--shake-amplitude) * .25) rgba(239,68,68,.35)}82%{box-shadow:0 0 0 var(--shake-amplitude) rgba(239,68,68,.85)}90%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}@keyframes stageBump{0%,70%,to{transform:translateY(0)}72%{transform:translateY(calc(-.5 * var(--shake-amplitude)))}76%,80%{transform:translateY(var(--shake-amplitude))}82%{transform:translateY(calc(-.2 * var(--shake-amplitude)))}}@media (prefers-reduced-motion:reduce){.error-field[data-state=shaking]{animation:none;outline:2px solid var(--shake-accent);outline-offset:2px}.error-shake-preview--horizontal:not(.pattern-preview--inspector) .error-field,.error-shake-preview--pulse:not(.pattern-preview--inspector) .error-field,.error-shake-preview--vertical:not(.pattern-preview--inspector) .error-field{animation:none}}