.hx-icon-studio{position:relative;min-height:440px}.hx-icon-studio .stg{position:absolute;left:50%;top:50%;width:560px;height:440px;margin:-220px 0 0 -280px}.hx-icon-studio .orbit{--r: 140px;--t: 48s;position:absolute;left:280px;top:220px;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border-radius:50%;border:1px dashed color-mix(in srgb,var(--a) 34%,rgb(255 255 255 / .12));animation:hx-is-spin var(--t) linear infinite}.hx-icon-studio .orbit.outer{--r: 200px;--t: 70s;border-color:#ffffff17;animation-direction:reverse}.hx-icon-studio .orbit:before{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--a);box-shadow:0 0 10px 2px color-mix(in srgb,var(--a) 70%,transparent);rotate:38deg;transform-origin:3px calc(var(--r) + 3px)}.hx-icon-studio .orbit.outer:before{background:#f1edf7;box-shadow:0 0 8px 1px #ffffff73;rotate:200deg}.hx-icon-studio .ic{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(var(--r) * -1)) rotate(calc(-360deg / var(--n) * var(--i)))}.hx-icon-studio .face{display:grid;place-items:center;width:100%;height:100%;border-radius:13px;animation:hx-is-spin var(--t) linear infinite reverse;background:#17151e;border:1px solid rgb(255 255 255 / .1);color:#e2deea;box-shadow:0 12px 22px -12px #000000d9}.hx-icon-studio .outer .face{animation-direction:normal}.hx-icon-studio .face svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.hx-icon-studio .inner .ic:nth-child(1) .face{color:#fff;border-color:#fff3;background:linear-gradient(145deg,color-mix(in srgb,var(--a) 72%,#fff),var(--a) 50%,color-mix(in srgb,var(--a) 60%,#1a0a2a))}.hx-icon-studio .inner .ic:nth-child(2) .face{border-radius:50%;color:var(--a);background:color-mix(in srgb,var(--a) 8%,#15131c);border:1.5px solid var(--a)}.hx-icon-studio .inner .ic:nth-child(3) .face{color:color-mix(in srgb,var(--a) 65%,#fff)}.hx-icon-studio .inner .ic:nth-child(3) svg{fill:color-mix(in srgb,var(--a) 35%,transparent)}.hx-icon-studio .inner .ic:nth-child(4) .face{border-radius:50%;color:#fff;background:#3d7cf5;border-color:transparent}.hx-icon-studio .inner .ic:nth-child(4) svg{fill:#fff}.hx-icon-studio .inner .ic:nth-child(5) .face{border-radius:10px;color:#1b1822;background:#f4f2ee;border-color:transparent}.hx-icon-studio .inner .ic:nth-child(6) .face{border-radius:6px;color:#1a1208;background:#ffb02e;border-color:transparent}.hx-icon-studio .outer .ic{width:38px;height:38px;margin:-19px 0 0 -19px}.hx-icon-studio .outer .face{border-radius:50%;color:#bdb8c9;background:#121117}.hx-icon-studio .outer .face svg{width:18px;height:18px;stroke-width:1.2}.hx-icon-studio .outer .ic:nth-child(3n+2) svg{stroke-width:2.3}.hx-icon-studio .outer .ic:nth-child(4n+3) svg{fill:color-mix(in srgb,currentColor 30%,transparent);stroke-width:1.7}.hx-icon-studio .keys{position:absolute;left:202px;top:142px;width:156px;height:156px;overflow:visible;fill:none;stroke:color-mix(in srgb,var(--a) 40%,rgb(255 255 255 / .25));stroke-width:.07;stroke-dasharray:.3 .25;opacity:.8}.hx-icon-studio .app{position:absolute;left:280px;top:220px;width:100px;height:100px;margin:-50px 0 0 -50px}.hx-icon-studio .tile{position:absolute;inset:0;display:grid;place-items:center;border-radius:24px;color:#fff;animation:hx-is-look 12s infinite;background:linear-gradient(145deg,color-mix(in srgb,var(--a) 70%,#fff),var(--a) 45%,color-mix(in srgb,var(--a) 55%,#1a0a2a));box-shadow:0 1px #fff6 inset,0 30px 50px -18px #000c,0 0 0 1px #ffffff1f}.hx-icon-studio .tile svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:hx-is-beat 12s infinite}.hx-icon-studio .glow{position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a) 45%,transparent),transparent)}.hx-icon-studio .sel{position:absolute;inset:-11px;border:1px solid color-mix(in srgb,var(--a) 80%,#fff)}.hx-icon-studio .sel i{position:absolute;width:7px;height:7px;background:#fff;border:1px solid color-mix(in srgb,var(--a) 80%,#000);border-radius:1.5px}.hx-icon-studio .sel i:nth-child(1){left:-4px;top:-4px}.hx-icon-studio .sel i:nth-child(2){right:-4px;top:-4px}.hx-icon-studio .sel i:nth-child(3){left:-4px;bottom:-4px}.hx-icon-studio .sel i:nth-child(4){right:-4px;bottom:-4px}.hx-icon-studio .look{position:absolute;left:280px;top:290px;display:grid;translate:-50% 0;padding:4px 11px;border-radius:7px;white-space:nowrap;font:600 11.5px var(--font-sans);color:#f1edf7;background:color-mix(in srgb,var(--a) 22%,#15131c);border:1px solid color-mix(in srgb,var(--a) 45%,transparent)}.hx-icon-studio .look span{grid-area:1 / 1;text-align:center;opacity:0;animation:hx-is-lbl 12s infinite}.hx-icon-studio .look span:nth-child(2){animation-delay:-8s}.hx-icon-studio .look span:nth-child(3){animation-delay:-4s}@keyframes hx-is-spin{to{transform:rotate(360deg)}}@keyframes hx-is-look{0%,30%{border-radius:24px;filter:none;color:#fff}36%,63%{border-radius:50%;filter:hue-rotate(-70deg) saturate(1.2);color:#fff}69%,96%{border-radius:11px;filter:hue-rotate(110deg) saturate(1.4) brightness(1.1);color:#1a1208}to{border-radius:24px;filter:none;color:#fff}}@keyframes hx-is-beat{0%,30%,36%,63%,69%,96%,to{transform:none}33%,66%,98%{transform:scale(.82) rotate(-8deg)}}@keyframes hx-is-lbl{0%{opacity:0;translate:0 4px}4%,29%{opacity:1;translate:0}33%,to{opacity:0;translate:0 -4px}}@media(max-width:980px){.hx-icon-studio{min-height:420px}.hx-icon-studio .stg{transform:scale(.84)}}@media(max-width:560px){.hx-icon-studio{min-height:380px}.hx-icon-studio .stg{transform:scale(.8)}}@media(prefers-reduced-motion:reduce){.hx-icon-studio :is(.orbit,.face,.tile,.tile svg,.look span){animation:none}.hx-icon-studio .look span:first-child{opacity:1}}.isx-print{width:100%;max-width:560px;display:grid;gap:14px;padding:18px 18px 14px;border-radius:14px;color:#cfe3ff;background:linear-gradient(rgb(255 255 255 / .05) 1px,transparent 1px) 0 0 / 20px 20px,linear-gradient(90deg,rgb(255 255 255 / .05) 1px,transparent 1px) 0 0 / 20px 20px,radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--a) 30%,transparent),transparent 70%),#10121c;border:1px solid rgb(160 190 255 / .18)}.isx-sheet{position:relative;justify-self:center;width:230px;height:230px;margin:10px 60px 4px}.isx-draw{width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}.isx-draw .grid{color:#b4cdff59}.isx-draw .key{stroke:#8cb4ff73;stroke-width:.08;stroke-dasharray:.4 .3}.isx-draw .k2{stroke:color-mix(in srgb,var(--a) 60%,transparent)}.isx-draw .ic{stroke:#fff;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:isx-draw 7s ease-in-out infinite;filter:drop-shadow(0 0 .5px var(--a))}.isx-draw .pt{fill:var(--a)}@keyframes isx-draw{0%{stroke-dashoffset:1}35%,85%{stroke-dashoffset:0}to{stroke-dashoffset:-1}}.isx-dim{position:absolute;font:600 10.5px var(--font-mono);color:#9fb8e6}.isx-dim.w{left:0;right:0;top:-14px;text-align:center;border-top:1px solid #5f78a8;padding-top:2px}.isx-dim.h{top:0;bottom:0;left:-34px;writing-mode:vertical-rl;rotate:180deg;text-align:center;border-right:1px solid #5f78a8;padding-right:2px}.isx-note{position:absolute;padding:2px 8px;border-radius:99px;font:600 10.5px var(--font-mono);white-space:nowrap;color:#0e1020;background:#cfe3ff}.isx-note.n1{right:-58px;top:26%}.isx-note.n2{right:-74px;bottom:16%;background:color-mix(in srgb,var(--a) 60%,#fff)}.isx-note.n3{left:-40px;bottom:-6px;background:#9fb8e6}.isx-ruler{display:flex;align-items:flex-end;justify-content:center;gap:22px;padding-top:10px;border-top:1px dashed rgb(160 190 255 / .3)}.isx-ruler span{display:grid;justify-items:center;gap:4px}.isx-ruler svg{fill:none;stroke:color-mix(in srgb,var(--a) 60%,#fff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.isx-ruler small{font:10px var(--font-mono);color:#9fb8e6}.isx-sets{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}.isx-set{display:grid;align-content:start;gap:6px;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--rule);transition:border-color .3s,transform .3s var(--ease)}.isx-set:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--a) 50%,var(--rule))}.isx-glyphs{display:flex;justify-content:space-between;padding:14px 18px;margin-bottom:6px;border-radius:12px;background:var(--bg-2);color:var(--ink)}.isx-glyphs svg{width:30px;height:30px}.isx-set:hover .isx-glyphs{color:var(--at)}.isx-set b{font-size:17px;letter-spacing:-.01em}.isx-set p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}.isx-set dl{display:grid;gap:4px;margin:6px 0 0}.isx-set dl div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}.isx-set dt{color:var(--ink-3)}.isx-set dd{margin:0;font:600 12px var(--font-mono);color:var(--ink);text-align:right}.isx-take{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center;margin-top:28px;padding:26px;border-radius:22px;background:radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--a) 14%,transparent),transparent 60%),var(--card);border:1px solid var(--rule)}.isx-kicker{font:600 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--at)}.isx-take h3{margin:8px 0;font-size:22px;letter-spacing:-.02em}.isx-take p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}@media(max-width:980px){.isx-sets{grid-template-columns:repeat(2,1fr)}.isx-take{grid-template-columns:1fr}}@media(max-width:560px){.isx-sets{grid-template-columns:1fr}.isx-sheet{width:180px;height:180px}}@media(prefers-reduced-motion:reduce){.isx-draw .ic{animation:none;stroke-dashoffset:0}}.isx-out{display:grid;gap:12px;padding:14px;border-radius:16px;background:#0f0e14;border:1px solid rgb(255 255 255 / .08);color:#e9e7ee;box-shadow:0 30px 60px -30px #000000b3}.isx-tabs{display:flex;flex-wrap:wrap;gap:6px}.isx-tabs span{padding:5px 11px;border-radius:99px;font:600 12px var(--font-sans);color:#8d879b;border:1px solid rgb(255 255 255 / .1);animation:isx-tab 18s calc(var(--i) * 3s) infinite}@keyframes isx-tab{0%,15.5%{color:#0b0b12;background:var(--a);border-color:var(--a)}17%,to{color:var(--isx-mute, #8d879b);background:none;border-color:var(--isx-line, rgb(255 255 255 / .1))}}.isx-panes{display:grid}.isx-pane{grid-area:1 / 1;display:grid;grid-template-rows:1fr auto;gap:10px;min-height:186px;opacity:0;animation:isx-pane 18s calc(var(--i) * 3s) infinite}@keyframes isx-pane{0%{opacity:0;translate:0 6px}2%,15%{opacity:1;translate:0}17%,to{opacity:0;translate:0 -6px}}.isx-pane pre{margin:0;padding:14px 16px;border-radius:10px;background:#08070c;font:12.5px/1.6 var(--font-mono);color:#c9c3d6;white-space:pre-wrap;word-break:break-all}.isx-png{display:flex;align-items:flex-end;justify-content:center;gap:26px;padding:14px;border-radius:10px;background:repeating-conic-gradient(#1a1822 0 25%,#121019 0 50%) 0 0 / 14px 14px}.isx-png span{display:grid;justify-items:center;gap:6px}.isx-png svg{fill:none;stroke:var(--a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;image-rendering:pixelated}.isx-png small{font:11px var(--font-mono);color:#8d879b}.isx-where{font:600 11.5px var(--font-mono);color:#8d879b}@media(prefers-reduced-motion:reduce){.isx-tabs span,.isx-pane{animation:none}.isx-pane:first-child{opacity:1}.isx-tabs span:first-child{color:#0b0b12;background:var(--a);border-color:var(--a)}}:root[data-theme=light] .hx-icon-studio .orbit{border-color:color-mix(in srgb,var(--a) 40%,rgb(16 18 27 / .12))}:root[data-theme=light] .hx-icon-studio .orbit.outer{border-color:#10121b1f}:root[data-theme=light] .hx-icon-studio .orbit.outer:before{background:#4b4658;box-shadow:none}:root[data-theme=light] .hx-icon-studio .face{background:#fff;border-color:#10121b1a;color:#3b3846;box-shadow:0 10px 20px -12px #10121b59}:root[data-theme=light] .hx-icon-studio .outer .face{background:#f6f5f1;color:#6f6a78}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(1) .face{color:#fff;border-color:transparent;background:linear-gradient(145deg,color-mix(in srgb,var(--a) 72%,#fff),var(--a) 50%,color-mix(in srgb,var(--a) 60%,#1a0a2a))}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(2) .face{color:var(--at);background:color-mix(in srgb,var(--a) 8%,#fff);border:1.5px solid var(--at)}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(3) .face{color:var(--at)}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(4) .face{color:#fff;background:#3d7cf5;border-color:transparent}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(5) .face{color:#fff;background:#1d1b24;border-color:transparent}:root[data-theme=light] .hx-icon-studio .inner .ic:nth-child(6) .face{color:#1a1208;background:#ffb02e;border-color:transparent}:root[data-theme=light] .hx-icon-studio .keys{stroke:color-mix(in srgb,var(--a) 50%,rgb(16 18 27 / .3))}:root[data-theme=light] .hx-icon-studio .tile{box-shadow:0 1px #fff6 inset,0 30px 50px -22px #10121b73,0 0 0 1px #10121b0f}:root[data-theme=light] .hx-icon-studio .sel{border-color:var(--at)}:root[data-theme=light] .hx-icon-studio .sel i{border-color:var(--at)}:root[data-theme=light] .hx-icon-studio .look{color:var(--ink);background:#fff;border-color:color-mix(in srgb,var(--a) 45%,rgb(16 18 27 / .1));box-shadow:0 6px 16px -10px #10121b59}:root[data-theme=light] .isx-print{color:#1f3d73;background:linear-gradient(rgb(40 90 190 / .08) 1px,transparent 1px) 0 0 / 20px 20px,linear-gradient(90deg,rgb(40 90 190 / .08) 1px,transparent 1px) 0 0 / 20px 20px,radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--a) 14%,transparent),transparent 70%),#f7f9fd;border-color:#285abe33}:root[data-theme=light] .isx-draw .grid{color:#285abe4d}:root[data-theme=light] .isx-draw .key{stroke:#285abe73}:root[data-theme=light] .isx-draw .ic{stroke:#1d1a26}:root[data-theme=light] :is(.isx-dim,.isx-ruler small){color:#3d5e98}:root[data-theme=light] .isx-dim.w{border-top-color:#7d97c6}:root[data-theme=light] .isx-dim.h{border-right-color:#7d97c6}:root[data-theme=light] .isx-note{background:#dce8ff}:root[data-theme=light] .isx-note.n3{background:#c4d6f5}:root[data-theme=light] .isx-ruler{border-top-color:#285abe40}:root[data-theme=light] .isx-ruler svg{stroke:var(--a)}:root[data-theme=light] .isx-out{--isx-mute: var(--ink-3);--isx-line: rgb(16 18 27 / .12);background:#fff;border-color:#10121b1a;color:var(--ink);box-shadow:0 30px 60px -36px #10121b66}:root[data-theme=light] .isx-tabs span{color:var(--ink-3);border-color:#10121b1f}@media(prefers-reduced-motion:reduce){:root[data-theme=light] .isx-tabs span:first-child{color:#0b0b12;border-color:var(--a)}}:root[data-theme=light] .isx-pane pre{background:#f6f5f1;color:#2b2d36;box-shadow:inset 0 0 0 1px #10121b12}:root[data-theme=light] .isx-png{background:repeating-conic-gradient(#fff 0 25%,#ecebe7 0 50%) 0 0 / 14px 14px}:root[data-theme=light] :is(.isx-png small,.isx-where){color:var(--ink-3)}