.switcher{--dev:#16181b;color:#c9ced3;background:radial-gradient(120% 80% at 50% -10%,#ffffff12,#0000 60%),linear-gradient(#1d2024,#131518);border-radius:28px;padding:14px;position:relative;box-shadow:0 0 0 1px #0009,inset 0 1px #ffffff14,0 40px 80px -40px #14161abf,0 18px 30px -18px #14161a80}.switcher__stage{grid-template-columns:minmax(0,1fr) clamp(170px,20%,270px);align-items:stretch;gap:12px;display:grid}.monitor--program{background:#0d0e10;border-radius:16px;padding:8px 8px 10px;box-shadow:inset 0 0 0 1px #ffffff0d}.monitor__bar{color:#8f969d;align-items:center;gap:12px;padding:2px 4px 9px;font-size:12px;font-weight:600;font-stretch:112%;display:flex}.monitor__title{color:#d8dce0}.monitor__tc{color:#8f969d;letter-spacing:.04em;margin-left:auto}.tally{letter-spacing:.08em;text-transform:uppercase;border-radius:4px;align-items:center;gap:7px;padding:3px 9px 3px 8px;font-size:11px;font-weight:760;display:inline-flex}.tally--live{background:var(--tally);color:#fff;box-shadow:0 0 18px -4px #ff3b30cc}.tally__lamp{background:#fff;border-radius:50%;width:6px;height:6px;animation:1.6s ease-in-out infinite lamp}@keyframes lamp{0%,to{opacity:1}50%{opacity:.35}}.monitor__screen{isolation:isolate;border-radius:8px;position:relative;overflow:hidden}.monitor__incoming{z-index:2;animation:fade-in .52s var(--ease-io) both;inset:0;position:absolute!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.monitor__glass{z-index:4;pointer-events:none;background:linear-gradient(118deg,#ffffff17 0%,#ffffff05 32%,#0000 45%);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff0a}.stinger{z-index:3;pointer-events:none;position:absolute;inset:0;overflow:hidden}.stinger i{background:var(--st-b);width:160%;animation:.92s linear both stinger-accent;position:absolute;top:-12%;bottom:-12%;left:-30%;transform:translate(-130%)skew(-24deg)}.stinger i+i{background:var(--st-a);animation-name:stinger-ink}@keyframes stinger-accent{0%{animation-timing-function:cubic-bezier(.55,0,.2,1);transform:translate(-130%)skew(-24deg)}40%,60%{animation-timing-function:cubic-bezier(.7,0,.45,1);transform:translate(0)skew(-24deg)}to{transform:translate(130%)skew(-24deg)}}@keyframes stinger-ink{0%,10%{animation-timing-function:cubic-bezier(.55,0,.2,1);transform:translate(-130%)skew(-24deg)}47%,53%{animation-timing-function:cubic-bezier(.7,0,.45,1);transform:translate(0)skew(-24deg)}90%,to{transform:translate(130%)skew(-24deg)}}.multiview{grid-template-rows:repeat(4,minmax(0,1fr));gap:8px;display:grid}.mv{transition:border-color .2s, transform .35s var(--ease-out), box-shadow .3s;background:#0d0e10;border:2px solid #2a2e34;border-radius:9px;align-self:center;padding:0;position:relative;overflow:hidden}.mv .scene{pointer-events:none}.mv:hover{border-color:#737a81;transform:translateY(-1px)}.mv--air{border-color:var(--tally);box-shadow:0 0 0 1px var(--tally), 0 0 26px -8px var(--tally)}.mv--air:hover{border-color:var(--tally)}.mv__label{color:#f1f3f5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0c0ec7;border-radius:4px;padding:3px 7px;font-size:11px;font-weight:600;font-stretch:108%;position:absolute;bottom:6px;left:6px}.mv__air{background:var(--tally);color:#fff;letter-spacing:.06em;text-transform:uppercase;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:760;position:absolute;top:6px;right:6px}.console{border-top:1px solid #ffffff0f;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;margin-top:14px;padding:14px 6px 4px;display:flex}.console__name{flex:220px;gap:7px;display:grid}.console__name span,.console__legend{color:#8c939a;font-size:12px;font-weight:600;font-stretch:110%}.console__group{gap:7px;display:grid}.console__name input{color:#fff;width:100%;height:46px;font:650 17px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;caret-color:var(--lime);background:#0b0c0e;border:1px solid #2c3036;border-radius:10px;padding:0 14px;font-stretch:120%;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 1px 3px #000000b3}.console__name input::placeholder{color:#545b62}.console__name input:focus{border-color:#8b9198;outline:none;box-shadow:inset 0 1px 3px #000000b3,0 0 0 3px #ffffff1a}.keys{flex-wrap:wrap;gap:6px;display:flex}.key{color:#d5d9dd;background:linear-gradient(#2b2f34,#222529);border:1px solid #2c3036;border-radius:10px;align-items:center;gap:8px;height:46px;padding:0 16px;font-size:14px;font-weight:650;font-stretch:110%;transition:background .2s,color .2s,box-shadow .25s,transform .12s,border-color .2s;display:inline-flex;box-shadow:inset 0 1px #ffffff0f,0 2px #0b0c0e}.key:hover{color:#fff;background:linear-gradient(#33383d,#282c30)}.key:active{transform:translateY(1px);box-shadow:inset 0 1px #ffffff0a,0 1px #0b0c0e}.key.is-on{color:#fff;background:linear-gradient(#3b4046,#2f3439);border-color:#5d636a;box-shadow:inset 0 0 0 1px #ffffff12,0 2px #0b0c0e,0 0 22px -8px #ffffff73}.key__swatch{background:var(--key-swatch);border-radius:2px;width:10px;height:10px;transition:box-shadow .25s}.key.is-on .key__swatch{box-shadow:0 0 0 2px #ffffff1f, 0 0 14px var(--key-swatch)}.key--motion{margin-left:auto}.switcher :focus-visible{outline-offset:2px;outline:2px solid #fff}@media (max-width:960px){.switcher{border-radius:22px;padding:10px}.switcher__stage{grid-template-columns:1fr}.multiview{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.mv__label{padding:2px 5px;font-size:10px;bottom:4px;left:4px}.mv__air{padding:1px 4px;font-size:9px;top:4px;right:4px}.key--motion{margin-left:0}}@media (max-width:560px){.monitor__bar{font-size:11px}.mv__label{display:none}.console{gap:12px}.console__group,.console__name{flex:100%}.keys .key{flex:1 1 0;justify-content:center;padding:0 10px}.key--motion{flex:100%;justify-content:center}}.monitor__pack{text-overflow:ellipsis;white-space:nowrap;color:#d8dce0;overflow:hidden}.monitor__demo{color:#8f969d;text-transform:uppercase;letter-spacing:.06em;margin-left:auto;font-size:10px}.monitor__tc{margin-left:0}@media (max-width:400px){.monitor__demo{display:none}.monitor__tc{margin-left:auto}}.switcher--hero{border:1px solid var(--rule);background:var(--paper);color:var(--graphite);border-radius:12px;padding:9px;font-stretch:100%;box-shadow:0 12px 32px -24px #171b1a33;container:hero-switcher/inline-size}.switcher--hero .switcher__stage{grid-template-columns:minmax(0,1fr);gap:9px}.switcher--hero .monitor--program{box-shadow:none;background:0 0;border-radius:0;padding:0}.switcher--hero .monitor__bar{min-height:30px;color:var(--steel);gap:12px;padding:2px 5px 10px;font-size:12px;font-weight:600;font-stretch:100%}.switcher--hero .monitor__pack{color:var(--graphite)}.switcher--hero .monitor__demo{color:var(--steel);letter-spacing:0;text-transform:none;font-size:12px;font-weight:450;display:block}.switcher--hero .monitor__screen{border-radius:5px}.switcher--hero .monitor__glass{display:none}.switcher--hero .multiview{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.switcher--hero .mv{border:1px solid var(--rule-soft);min-width:0;min-height:44px;color:var(--steel);box-shadow:none;background:0 0;border-radius:5px;justify-content:center;align-items:center;padding:0 6px;transition:color .2s,background-color .2s,border-color .2s;display:flex}.switcher--hero .mv:hover{border-color:var(--steel);color:var(--graphite);transform:none}.switcher--hero .mv--air,.switcher--hero .mv--air:hover{border-color:var(--graphite);background:var(--graphite);color:var(--lime);box-shadow:none}.switcher--hero .mv__label{color:inherit;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-radius:0;padding:0;font-size:12px;font-weight:600;font-stretch:100%;display:block;position:static}.switcher--hero .console{border-top:1px solid var(--rule-soft);grid-template-columns:minmax(120px,1fr) auto auto;align-items:end;gap:10px;margin-top:11px;padding:10px 0 0;display:grid}.switcher--hero .console__name,.switcher--hero .console__group{gap:5px;min-width:0}.switcher--hero .console__name span,.switcher--hero .console__legend{color:var(--steel);font-size:12px;font-weight:500;font-stretch:100%}.switcher--hero .console__name input{border:1px solid var(--rule);background:var(--white);height:44px;color:var(--graphite);font:600 16px/1 var(--font);letter-spacing:.02em;box-shadow:none;border-radius:5px;padding-inline:10px;font-stretch:100%}.switcher--hero .console__name input::placeholder{color:var(--steel)}.switcher--hero .console__name input:focus{border-color:var(--graphite);outline:2px solid var(--graphite);outline-offset:2px;box-shadow:none}.switcher--hero .keys{flex-wrap:wrap;gap:4px}.switcher--hero .console__packs{max-width:270px}.switcher--hero .key{border:1px solid var(--rule);height:44px;color:var(--graphite);box-shadow:none;background:0 0;border-radius:5px;gap:6px;padding-inline:10px;font-size:12px;font-weight:600;font-stretch:100%}.switcher--hero .key:hover{border-color:var(--steel);background:var(--white);color:var(--graphite)}.switcher--hero .key:active{box-shadow:none;transform:none}.switcher--hero .key.is-on{border-color:var(--graphite);background:var(--graphite);color:var(--white);box-shadow:none}.switcher--hero .key__swatch{width:8px;height:8px}.switcher--hero .key.is-on .key__swatch{box-shadow:none}.switcher--hero :focus-visible{outline-color:var(--graphite);outline-offset:3px}@container hero-switcher (width<=660px){.switcher--hero .console{grid-template-columns:minmax(0,1fr) auto}.switcher--hero .console__transitions{grid-column:1/-1}.switcher--hero .console__transitions .key{flex:1;justify-content:center}}@container hero-switcher (width<=430px){.switcher--hero .console{grid-template-columns:minmax(0,1fr)}.switcher--hero .console__transitions{grid-column:auto}.switcher--hero .keys .key{flex:1;justify-content:center;padding-inline:8px}}