.animation-lab{display:grid;grid-template-columns:220px minmax(480px,1fr) 290px;max-width:1800px;height:calc(100svh - 82px);min-height:650px;margin:auto}.animation-library{border-right:1px solid #ffffff0c;overflow-y:auto}.animation-library .section-heading span{font-size:10px;color:#6e7e7d}.animation-group{margin-bottom:16px}.animation-group h2{font-size:10px;font-weight:400;color:#6c7b7b;margin-bottom:7px}.animation-choice{display:flex;align-items:center;gap:11px;width:100%;padding:7px 10px;border:1px solid transparent;border-radius:5px;background:none;text-align:left;color:#94a3a4;font-size:11px;margin-bottom:2px}.animation-choice:hover{background:#ffffff05}.animation-choice[aria-pressed=true]{border-color:#b4d2aa55;background:#b4d2aa0c;color:#deead8}.animation-choice svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.2;flex-shrink:0}.animation-preview{background:radial-gradient(ellipse at 50% 40%,#34403944,transparent 65%),#141819;height:calc(100svh - 82px);min-height:650px;position:sticky;top:0;display:flex;flex-direction:column;padding:26px 34px 23px}.animation-preview .preview-heading{font-size:12px}#play-state{font-size:10px;color:#7b8b85}.animation-display{display:grid;place-items:center;flex:1;min-height:0;padding:38px 50px 45px;overflow:hidden}.animation-stage{width:min(370px,100%,calc((100svh - 360px)*2/3));aspect-ratio:2/3;perspective:1200px}.test-card{width:100%;height:100%;margin:0;position:relative;border-radius:12px;transform-origin:50% 50%;box-shadow:0 28px 60px #000a;will-change:transform,opacity}.test-card .art{transform:none}.test-card .card-face{transform-style:preserve-3d}.test-card canvas{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;border-radius:inherit}#reaction{inset:-15%;width:130%;height:130%;border-radius:0;z-index:5}.test-card .gpu-finish{overflow:hidden}.transport{border-top:1px solid #ffffff0e;padding-top:19px}.transport-actions{display:flex;align-items:center;gap:9px}.play-button{background:#bfd6b5;color:#202e23;border-radius:5px;padding:10px 22px;font-size:11px;min-width:75px}.play-button:hover{background:#d0e4c8}.transport .button{font-size:10px}.transport .compact-toggle{font-size:10px;margin-left:4px}.transport output{margin-left:auto;font-size:10px;color:#9eafaa;font-variant-numeric:tabular-nums;white-space:nowrap}.transport input[type=range]{margin:20px 0 10px}.timeline-labels{display:flex;justify-content:space-between;font-size:9px;color:#586b68}.animation-inspector{border-left:1px solid #ffffff0c;padding:29px 24px;overflow-y:auto}.animation-inspector h2{font-size:14px;margin-bottom:29px}.animation-inspector .appearance-toggle{margin-top:17px;margin-bottom:34px;font-size:11px}.setting-block{margin-bottom:29px}.setting-block input[type=range]{margin-bottom:0}.animation-inspector .field-label{margin-bottom:10px}.direction-label{margin-top:25px}#new-pattern{margin-top:17px;width:100%}.lab-note{border-top:1px solid #ffffff0c;padding-top:18px;margin-top:27px;font-size:10px;line-height:1.7;color:#71847d}#lab-feedback:empty{display:none}#lab-feedback{border:0;color:#d4bb8f;padding:0;margin-top:15px}.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}@media(min-width:1450px){.animation-lab{grid-template-columns:240px minmax(480px,1fr) 320px}.animation-inspector{padding-left:30px;padding-right:30px}}
.animation-choice .fa-solid{width:19px;text-align:center;flex-shrink:0;font-size:14px;line-height:19px}