.lab-trigger { appearance: none; border: 0; padding: 0; color: inherit; background: transparent; cursor: pointer; isolation: isolate; touch-action: none; -webkit-touch-callout: none; }
.lab-trigger img { pointer-events: none; -webkit-user-drag: none; }
.lab-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 25px; }
.lab-ring { position: absolute; inset: 2%; border-radius: 50%; pointer-events: none; z-index: 2; opacity: var(--lab-charge,0); background: conic-gradient(#9ac7ff calc(var(--lab-charge,0) * 1turn),transparent 0); mask: radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px)); }
.lab-trigger[data-lab-custom] img { box-shadow: 0 18px 60px #0007,0 0 var(--lab-custom-blur,22px) var(--lab-custom-color,#0070ff); }
.lab-trigger[data-lab-holding] img { filter: brightness(calc(1 + var(--lab-charge,0) * .4)); }
body.lab-shake { transform: translate(var(--lab-x,0px),var(--lab-y,0px)) rotate(var(--lab-roll,0deg)); }
#lab-flash { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; box-shadow: inset 0 0 9vw #488cff; }
#lab-flash.lab-lit { opacity: var(--lab-light,0); }
#lab-dialog { width: min(510px,calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: clamp(16px,4vw,34px); border: 1px solid #7099ed; border-radius: 20px; background: var(--panel,#101521); color: var(--ink,#f4f6ff); text-align: center; box-shadow: 0 0 65px #4877ff57; }
#lab-dialog::backdrop { background: #030718d9; }
#lab-dialog h2 { font-size: clamp(30px,7vw,50px); line-height: 1.05; }
#lab-unlocked { margin: 22px 0 12px; color: var(--blue); min-height: 1.6em; }
#lab-preview { width: min(44vw,180px); height: auto; aspect-ratio: 1; border-radius: 20%; margin: 20px auto; }
#lab-close { position: absolute; inset-block-start: 9px; inset-inline-end: 12px; font: 26px/1 system-ui; width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.lab-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.lab-controls label { display: grid; justify-items: center; align-content: space-between; gap: 8px; font-size: 13px; }
.lab-controls input { max-width: 100%; cursor: pointer; }
.lab-controls input[type=color] { width: 42px; height: 33px; }
.lab-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.lab-actions button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--base); color: var(--ink); font: inherit; cursor: pointer; }
.lab-actions #lab-apply { background: #c2cdff; color: #101636; }
.lab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media(prefers-reduced-motion:reduce) { body.lab-shake { transform: none; } }
.lab-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.lab-sparks i { position: absolute; inset: 50% auto auto 50%; width: 13px; height: 3px; border-radius: 2px; background: #95c7ff; box-shadow: 0 0 11px #539cff; opacity: calc(var(--lab-burst,0) * .85); transform: rotate(var(--angle)) translateX(calc(65px + var(--lab-burst,0) * var(--distance))) rotate(20deg); }
[dir=rtl] .lab-sparks i { inset: 50% auto auto 50%; }
@media(prefers-reduced-motion:reduce) { .lab-sparks { display: none; } }