.wand-vars{--vars-line:#373737;--vars-blue:#0d99ff;--w-sans:"Onest Variable",Arial,sans-serif;margin:0}.wand-vars__window{height:clamp(420px,38vw,560px);font:400 12.5px/1.3 var(--w-sans);color:#e6e6e6;letter-spacing:0;background:#2c2c2c;border-radius:12px;grid-template-columns:minmax(150px,25%) minmax(0,1fr);display:grid;overflow:hidden;box-shadow:0 0 0 1px #ffffff1a,0 60px 120px -60px #000000f2}.wand-vars__side{border-right:1px solid var(--vars-line);background:#252525;padding:12px 10px;overflow:hidden}.wand-vars__file{padding:4px 8px 12px;border-bottom:1px solid var(--vars-line);margin:0 -10px 4px;padding-inline:18px}.wand-vars__file b{color:#fff;font-size:14px;font-weight:600}.wand-vars__heading{color:#f2f2f2;padding:12px 8px 6px;font-weight:600}.wand-vars__collections{gap:2px;display:grid}.wand-vars__collections button{color:#cfcfcf;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;transition:background .3s,color .3s;display:flex}.wand-vars__collections button:hover{background:#333}.wand-vars__collections button[aria-selected=true]{color:#fff;background:#3a3a3a;font-weight:600}.wand-vars__collections button:focus-visible{outline:2px solid var(--vars-blue);outline-offset:1px}.wand-vars__collections small,.wand-vars__tree small{color:#9a9a9a;font-variant-numeric:tabular-nums;font-size:12px}.wand-vars__tree{gap:1px;margin:0;padding:0;list-style:none;display:grid}.wand-vars__tree li{padding:6px 8px 6px calc(8px + var(--depth) * 12px);color:#cfcfcf;white-space:nowrap;animation:.5s cubic-bezier(.2,.8,.2,1) both wand-vars-in;animation-delay:calc(var(--i) * 35ms);border-radius:6px;justify-content:space-between;gap:8px;display:flex}.wand-vars__tree li span{text-overflow:ellipsis;overflow:hidden}.wand-vars__tree li.is-current{color:#fff;background:#394360;font-weight:600}.wand-vars__main{flex-direction:column;min-width:0;display:flex}.wand-vars__bar{border-bottom:1px solid var(--vars-line);flex:none;justify-content:space-between;align-items:center;gap:12px;height:46px;padding:0 16px;display:flex}.wand-vars__bar b{color:#fff;font-size:14px;font-weight:500}.wand-vars__mode{color:#8fcfff;white-space:nowrap;background:#0d99ff1f;border-radius:999px;align-items:center;gap:8px;padding:5px 10px;font-size:11.5px;display:inline-flex;box-shadow:inset 0 0 0 1px #0d99ff4d}.wand-vars__mode i{background:var(--vars-blue);width:6px;height:6px;box-shadow:0 0 8px var(--vars-blue);border-radius:50%}.wand-vars__table{flex:1;min-height:0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,#0000);mask-image:linear-gradient(#000 82%,#0000)}.wand-vars__row{z-index:1;grid-template-columns:minmax(0,1.25fr) repeat(var(--modes),minmax(0,1fr));border-bottom:1px solid var(--vars-line);min-height:38px;animation:.55s cubic-bezier(.2,.8,.2,1) both wand-vars-in;animation-delay:calc(var(--i) * 45ms);align-items:stretch;display:grid;position:relative}.wand-vars__row>span{align-items:center;min-width:0;padding:0 12px;display:flex}.wand-vars__row>span+span{border-left:1px solid var(--vars-line)}.wand-vars__row--head{color:#fff;min-height:40px;font-weight:600;animation:none}.wand-vars__row--head>span{white-space:nowrap;text-overflow:ellipsis;line-height:40px;transition:color .4s;display:block;overflow:hidden}.wand-vars__row--head>span.is-mode{color:#8fcfff}.wand-vars__sweep{z-index:0;top:0;bottom:0;left:calc((1.25 + var(--mode)) / (1.25 + var(--modes)) * 100%);width:calc(100% / (1.25 + var(--modes)));pointer-events:none;background:linear-gradient(#0d99ff29,#0d99ff0a 70%,#0000);transition:left .7s cubic-bezier(.65,0,.35,1);position:absolute;box-shadow:inset 1px 0 #0d99ff66,inset -1px 0 #0d99ff66}.wand-vars__group{z-index:1;color:#fff;border-bottom:1px solid var(--vars-line);white-space:nowrap;text-overflow:ellipsis;animation:.55s cubic-bezier(.2,.8,.2,1) both wand-vars-in;animation-delay:calc(var(--i) * 45ms);padding:18px 12px 9px;font-weight:600;position:relative;overflow:hidden}.wand-vars__group span{color:#9a9a9a;font-weight:400}.wand-vars__name{white-space:nowrap;gap:9px}.wand-vars__name svg{color:#a9a9a9;flex:none;width:15px;height:15px}.wand-vars__row>span.wand-vars__name{text-overflow:ellipsis;overflow:hidden}.wand-vars__color{align-items:center;gap:8px;min-width:0;display:flex}.wand-vars__color i{width:14px;height:14px;animation:.5s cubic-bezier(.34,1.56,.64,1) both wand-vars-pop;animation-delay:calc(var(--i) * 45ms + .18s);border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px #ffffff24}.wand-vars__color code{font:inherit;font-variant-numeric:tabular-nums;color:#e6e6e6;text-overflow:ellipsis;overflow:hidden}.wand-vars__bool{align-items:center;gap:9px;display:flex}.wand-vars__bool i{background:#4a4a4a;border-radius:999px;flex:none;width:30px;height:17px;position:relative}.wand-vars__bool i:after{content:"";background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;top:3.5px;left:3.5px}.wand-vars__bool.is-on i{animation:.45s both wand-vars-track;animation-delay:calc(var(--i) * 70ms + .3s)}.wand-vars__bool.is-on i:after{animation:.45s cubic-bezier(.34,1.56,.64,1) both wand-vars-knob;animation-delay:calc(var(--i) * 70ms + .3s)}.wand-vars__bool em{color:#e6e6e6;font-style:normal}.wand-vars__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.wand-vars figcaption{font:400 13.5px/1.55 var(--w-sans);color:#8d8d8d;align-items:baseline;gap:14px;margin-top:18px;display:flex}.wand-vars figcaption span{letter-spacing:.14em;text-transform:uppercase;color:#e2e2e2;flex:none;font-size:11.5px}@keyframes wand-vars-in{0%{opacity:0;transform:translateY(8px)}}@keyframes wand-vars-pop{0%{opacity:0;transform:scale(.2)}}@keyframes wand-vars-track{0%{background:#4a4a4a}to{background:var(--vars-blue)}}@keyframes wand-vars-knob{0%{transform:none}to{transform:translate(13px)}}@media (max-width:680px){.wand-vars__window{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;height:420px;font-size:11.5px}.wand-vars__side{border-right:0;border-bottom:1px solid var(--vars-line);padding:10px}.wand-vars__file,.wand-vars__heading,.wand-vars__tree{display:none}.wand-vars__collections{scrollbar-width:none;gap:4px;display:flex;overflow-x:auto}.wand-vars__collections button{flex:none;padding:7px 10px}.wand-vars__collections small{display:none}.wand-vars__bar{height:40px;padding:0 12px}.wand-vars__row{grid-template-columns:minmax(0,1.1fr) repeat(var(--modes),minmax(0,1fr));min-height:34px}.wand-vars__row>span{padding:0 8px}.wand-vars__row--head>span{font-size:10.5px;line-height:36px}.wand-vars__sweep{left:calc((1.1 + var(--mode)) / (1.1 + var(--modes)) * 100%);width:calc(100% / (1.1 + var(--modes)))}.wand-vars__color code,.wand-vars__bool em,.wand-vars__name svg{display:none}.wand-vars__group{padding:14px 8px 7px}.wand-vars figcaption{gap:12px;font-size:13px}}@media (prefers-reduced-motion:reduce){.wand-vars__row,.wand-vars__group,.wand-vars__tree li,.wand-vars__color i{animation:none}.wand-vars__bool.is-on i{background:var(--vars-blue);animation:none}.wand-vars__bool.is-on i:after{animation:none;transform:translate(13px)}.wand-vars__sweep{transition:none}}.wand-vars__window{grid-template-columns:minmax(140px,21%) minmax(0,1fr)}.wand-vars small{letter-spacing:0}.wand-vars__collections span,.wand-vars__tree li span{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.wand-vars__collections small,.wand-vars__tree small{flex:none}.wand-vars__row{grid-template-columns:minmax(0,1.1fr) repeat(var(--modes),minmax(0,1fr))}.wand-vars__sweep{left:calc((1.1 + var(--mode)) / (1.1 + var(--modes)) * 100%);width:calc(100% / (1.1 + var(--modes)))}.wand-vars__row>span{padding:0 10px}.wand-vars__color code{font-size:11.5px}@media (max-width:680px){.wand-vars__window{grid-template-columns:1fr}.wand-vars__row>span{padding:0 8px}}.wand-vars__tree,.wand-vars__collections{grid-template-columns:minmax(0,1fr)}.wand-vars__color small.wand-vars__alpha,.wand-vars__alias small.wand-vars__alpha{color:#bdbdbd;font-variant-numeric:tabular-nums;background:#383838;border-radius:4px;margin-left:auto;padding:3px 7px;font-size:11px}.wand-vars__color i.is-alpha,.wand-vars__alias i.is-alpha{background:linear-gradient(var(--sw),var(--sw)),repeating-conic-gradient(#8a8a8a 0 25%,#d9d9d9 0 50%) 0 0/6px 6px!important}.wand-vars__color i{background:var(--sw)}.wand-vars__alias{align-items:center;gap:8px;width:100%;min-width:0;display:flex}.wand-vars__alias em{color:#e6e6e6;white-space:nowrap;text-overflow:ellipsis;background:#383838;border-radius:5px;align-items:center;gap:6px;min-width:0;padding:3px 7px 3px 4px;font-style:normal;display:inline-flex;overflow:hidden;box-shadow:inset 0 0 0 1px #474747}.wand-vars__alias em i{background:var(--sw);width:13px;height:13px;animation:.5s cubic-bezier(.34,1.56,.64,1) both wand-vars-pop;animation-delay:calc(var(--i) * 45ms + .18s);border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px #ffffff24}.wand-vars__alias em svg{color:#a9a9a9;width:13px;height:13px}@media (max-width:680px){.wand-vars__alias em{padding:2px 5px 2px 3px;font-size:10px}.wand-vars__color small.wand-vars__alpha,.wand-vars__alias small.wand-vars__alpha{display:none}}