.trio-media.selection-tools-demo { max-width: 460px; border-color: #2c2c30; background: #101012; box-shadow: 0 20px 45px #0004; }
.selection-demo-art { position: relative; aspect-ratio: 3 / 2; }
.selection-demo-art > img { width: 100%; height: 100%; object-fit: cover; }
.selection-demo-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-selection-phase] { opacity: 0; }
[data-selection-phase="rect"] { opacity: 1; }
.selection-demo-drawing, .selection-demo-pointer { opacity: 0; }
.selection-demo-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px; border-top: 1px solid #29292d; }
.selection-demo-tools > span { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 8px 6px; border: 1px solid #29292d; border-radius: 5px; background: #151517; color: #909098; font-size: 11px; white-space: nowrap; }
.selection-demo-tools > [data-selection-tool="rect"] { border-color: #00dd6170; background: #00dd6114; color: #00dd61; }
.selection-tools-demo[data-ready] .selection-demo-tools > span { border-color: #29292d; background: #151517; color: #909098; }
.selection-tools-demo[data-active-tool="rect"] .selection-demo-tools > [data-selection-tool="rect"],
.selection-tools-demo[data-active-tool="lasso"] .selection-demo-tools > [data-selection-tool="lasso"],
.selection-tools-demo[data-active-tool="wand"] .selection-demo-tools > [data-selection-tool="wand"] { border-color: #00dd6170; background: #00dd6114; color: #00dd61; }
.selection-demo-tools svg { flex-shrink: 0; }
@media (max-width: 540px) {
  .selection-demo-tools > span { gap: 4px; font-size: 9px; }
  .selection-demo-tools svg { width: 14px; height: 14px; }
}