.lut-demo-frame{display:grid;place-items:center;background:#161616}.lut-demo-lattice{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;width:72%;transform:perspective(700px) rotateX(14deg) rotateY(-16deg)}.lut-demo-lattice span{aspect-ratio:1;border-radius:.28rem;background:#2a2a2a}.lut-demo-lattice span:nth-child(2){background:#5a5a5a}.lut-demo-lattice span:nth-child(3){background:#8a8a8a}.lut-demo-lattice span:nth-child(4){background:#c8c8c8}.lut-demo-lattice span:nth-child(5){background:#3a3a3a}.lut-demo-lattice span:nth-child(6){background:#6e6e6e}.lut-demo-lattice span:nth-child(7){background:#9c9c9c}.lut-demo-lattice span:nth-child(8){background:#ddd}.lut-demo-lattice span:nth-child(9){background:#222}.lut-demo-lattice span:nth-child(10){background:#4a4a4a}.lut-demo-lattice span:nth-child(11){background:#7a7a7a}.lut-demo-lattice span:nth-child(12){background:#b0b0b0}.lut-demo-lattice span:nth-child(13){background:#111}.lut-demo-lattice span:nth-child(14){background:#444}.lut-demo-lattice span:nth-child(15){background:#777}.lut-demo-lattice span:nth-child(16){background:#efefef}.lut-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem}.lut-preview-card{margin:0;min-width:0}.lut-preview-card__media{border-radius:.85rem;overflow:hidden;background:var(--bg-subtle);border:1px solid var(--border);aspect-ratio:16 / 10}.lut-preview-card canvas{display:block;width:100%;height:100%;object-fit:cover}.lut-preview-card figcaption{margin-top:.5rem;font-size:.72rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.lut-curve-panel{margin-top:1rem;border-radius:1rem;border:1px solid var(--border);background:var(--bg-elevated);overflow:hidden}.lut-curve-panel__head{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--border);font-size:.78rem;font-weight:650}.lut-curve-panel__head p{margin:0}.lut-curve-panel__head span{color:var(--text-muted);font-weight:600}.lut-curve-wrap{height:9rem;color:var(--text);background:linear-gradient(color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px) 0 0 / 100% 25%,linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1px) 0 0 / 12.5% 100%,var(--bg-subtle)}.lut-curve-wrap svg{width:100%;height:100%;display:block;padding:.65rem;box-sizing:border-box}@media(max-width:900px){.lut-preview-grid{grid-template-columns:1fr}}