.trio-media.parameters-demo { max-width: 350px; height: 310px; padding-top: 12px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.parameters-demo-card { width: 100%; height: 100%; border: 1px solid #303034; border-radius: 8px; background: #101012; box-shadow: 0 20px 45px #0004; overflow: hidden; }
.parameters-demo-body { padding: 20px; }
.parameters-demo-primary, .parameters-demo-extra { display: grid; gap: 19px; }
.parameters-demo-control > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-mono); font-size: 10px; line-height: 14px; }
.parameters-demo-control > div:first-child > span:first-child { color: #a2a2aa; text-transform: uppercase; letter-spacing: .03em; }
.parameters-demo-control > div:first-child > span:last-child { color: #00dd61; }
.parameters-demo-track { position: relative; height: 4px; border-radius: 3px; background: #424248; }
.parameters-demo-track > span { position: absolute; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); border-radius: 50%; background: #eeeeef; box-shadow: 0 1px 3px #0008; }
.parameters-demo-toggle { display: flex; align-items: center; gap: 7px; padding-top: 22px; color: #a2a2aa; font-family: var(--font-mono); font-size: 10px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; }
[data-parameters-chevron] { display: block; width: 12px; height: 12px; }
[data-parameters-chevron] svg { display: block; width: 12px; height: 12px; }
.parameters-demo-advanced { height: 0; overflow: hidden; opacity: 0; }
.parameters-demo-extra { margin-top: 18px; padding-left: 12px; border-left: 1px solid #303034; }
@media (max-width: 540px) { .parameters-demo-body { padding: 18px; } }