@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-ext-wght-normal-BOFOeGcA.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans Variable;font-style:normal;font-display:swap;font-weight:100 1000;src:url(/assets/dm-sans-latin-wght-normal-Xz1IZZA0.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/jetbrains-mono-latin-600-normal-C8RAYTDA.woff2)format("woff2"),url(/assets/jetbrains-mono-latin-600-normal-BfsvjouI.woff)format("woff")}:root,[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f4f1;--surface:#fff;--surface-2:#f7f7f4;--line:#e7e6e1;--line-2:#d6d5cf;--text:#17181a;--muted:#686b70;--faint:#9c9ea2;--accent:#d4441a;--accent-ink:#c23d15;--accent-soft:#d4441a1a;--glow:0 0 14px #d4441a47, 0 0 44px #d4441a1f;--check-a:#ecece8;--check-b:#f7f7f4;--veil:#f7f7f4cc;--shadow:0 1px 2px #1414140a, 0 10px 30px #1414140f}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0c0f0f;--surface:#151918;--surface-2:#1b1f1e;--line:#252a29;--line-2:#363c3a;--text:#eef1f0;--muted:#9aa19f;--faint:#69706e;--accent:#d4441a;--accent-ink:#ff7a4d;--accent-soft:#ef532626;--glow:0 0 16px #ef532659, 0 0 52px #ef532629;--check-a:#1b1f1e;--check-b:#212625;--veil:#0c0f0fbd;--shadow:0 1px 2px #0000004d, 0 12px 34px #00000059}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font:400 16px/1.5 DM Sans Variable,system-ui,sans-serif;overflow:hidden}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:0}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}svg{display:block}.ic{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:20px;height:20px}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.screen{flex-direction:column;height:100%;display:flex}.top{justify-content:space-between;align-items:center;padding:20px 28px 18px;display:flex}.name{letter-spacing:-.02em;font:800 1.3rem/1 DM Sans Variable}.name span{color:var(--accent-ink)}.round{border:1px solid var(--line);background:var(--surface);width:40px;height:40px;color:var(--text);border-radius:50%;flex:none;place-items:center;display:grid}.round:hover{border-color:var(--accent);color:var(--accent-ink)}.round .ic{width:18px;height:18px}.round[disabled]{opacity:.35;pointer-events:none}.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:22px}.btn{white-space:nowrap;letter-spacing:.16em;text-transform:uppercase;height:44px;color:var(--text);border:1px solid var(--line-2);border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:0 22px;font:600 .72rem/1 JetBrains Mono,ui-monospace,monospace;transition:box-shadow .2s,border-color .2s,color .2s;display:inline-flex}.btn:hover{border-color:var(--accent);color:var(--accent-ink)}.btn.primary{background:var(--accent);color:#fff;box-shadow:var(--glow);border-color:#0000}.btn.primary:hover{color:#fff;box-shadow:0 0 0 3px var(--accent-soft), var(--glow)}.btn.big{width:100%;height:56px;font-size:.78rem}.btn.sm{height:34px;padding:0 15px;font-size:.62rem}.btn.quiet{color:var(--muted);border-color:#0000}.btn[disabled]{opacity:.35;box-shadow:none;pointer-events:none}.btn .ic{width:16px;height:16px}.sub{text-align:center;color:var(--muted);margin-top:10px;font-size:.82rem}.drop{border:1.5px dashed var(--line-2);background:var(--surface-2);text-align:center;border-radius:18px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:60px 28px;display:flex}.drop .bub{background:var(--surface);border:1px solid var(--line);width:64px;height:64px;color:var(--accent-ink);border-radius:20px;place-items:center;margin-bottom:10px;display:grid}.drop .bub svg{width:28px;height:28px}.drop h2{letter-spacing:-.01em;font:700 1.45rem/1.2 DM Sans Variable}.drop p{color:var(--muted);font-size:.95rem}.drop .btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;display:flex}.drop .fmt{color:var(--faint);margin-top:12px;font-size:.8rem}.dragging:after{content:attr(data-release);z-index:50;border:2px dashed var(--accent);background:color-mix(in srgb, var(--bg) 82%, transparent);color:var(--accent-ink);pointer-events:none;border-radius:26px;place-items:center;font:700 1.5rem DM Sans Variable;display:grid;position:fixed;inset:12px}.set .row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:18px;padding:16px 0;display:flex}.set .row.col{flex-direction:column;align-items:stretch;gap:12px}.set .head{justify-content:space-between;align-items:center;gap:16px;display:flex}.set .t{flex-wrap:wrap;align-items:center;gap:8px;font:600 .98rem/1.3 DM Sans Variable;display:flex}.set .h{color:var(--muted);margin-top:3px;font:400 .84rem/1.45 DM Sans Variable}.set .h b{color:var(--text);font-weight:600}.badge{background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap;border-radius:99px;padding:4px 8px;font:600 .7rem/1 DM Sans Variable}.switch{background:var(--line-2);border-radius:99px;flex:none;width:44px;height:26px;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:left .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.switch[aria-checked=true]{background:var(--accent)}.switch[aria-checked=true]:after{left:21px}.seg{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;flex:none;padding:3px;display:inline-flex}.seg button{color:var(--muted);border-radius:999px;padding:6px 14px;font:500 .88rem/1.2 DM Sans Variable}.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px #0000001f}[data-theme=dark] .seg button[aria-pressed=true]{background:var(--line-2)}.wh{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.wh .x{color:var(--muted)}.input{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;align-items:center;gap:8px;min-width:0;height:44px;padding:0 14px;display:flex}.input:focus-within{border-color:var(--accent)}.input small{color:var(--muted);font:500 .82rem/1 DM Sans Variable}.input input{-moz-appearance:textfield;background:0 0;border:0;outline:none;width:100%;min-width:0;font:600 1rem/1 DM Sans Variable}.input input::-webkit-inner-spin-button{-webkit-appearance:none}.select{align-items:center;display:inline-flex;position:relative}.select select{appearance:none;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;max-width:100%;height:40px;padding:0 36px 0 14px;font:600 .9rem/1 DM Sans Variable}.select .ic{width:16px;height:16px;color:var(--muted);pointer-events:none;position:absolute;right:12px}.more{border-top:1px solid var(--line);color:var(--muted);align-items:center;gap:8px;width:100%;padding:16px 0 6px;font:600 .9rem/1 DM Sans Variable;display:flex}.more .ic{width:16px;height:16px;transition:transform .2s}.more[aria-expanded=true] .ic{transform:rotate(180deg)}.range{align-items:center;gap:12px;min-width:170px;display:flex}.range input{accent-color:var(--accent);flex:1}.range span{text-align:right;min-width:28px;font:600 .9rem DM Sans Variable}.color{border:1px solid var(--line);background:0 0;border-radius:8px;flex:none;width:40px;height:32px;padding:2px}.checker{background-color:var(--check-b);background-image:conic-gradient(var(--check-a) 25%, transparent 0 50%, var(--check-a) 0 75%, transparent 0);background-size:16px 16px}.link{color:var(--accent-ink);text-underline-offset:3px;text-decoration:underline;-webkit-text-decoration-color:var(--accent-soft);text-decoration-color:var(--accent-soft);font-weight:600}.progress{flex-direction:column;gap:12px;display:flex}.progress .l{justify-content:space-between;font:600 .95rem DM Sans Variable;display:flex}.progress .l span{color:var(--muted);font-weight:500}.progress .track{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;height:10px;overflow:hidden}.progress .track i{background:var(--accent);border-radius:99px;height:100%;transition:width .2s;display:block}.cv{width:100%;height:100%;position:relative;overflow:hidden}.cv img{object-fit:fill;width:100%;height:100%;position:absolute;inset:0}.cv .frame{outline:1.5px solid var(--accent);box-shadow:0 0 0 9999px var(--veil);border-radius:1px;position:absolute}.cv .frame.cut{outline-style:dashed}.app{flex:1;grid-template-columns:1fr 360px;gap:20px;min-height:0;padding:0 24px 22px;display:grid}.gallery{flex-direction:column;min-height:0;display:flex;position:relative}.bar{align-items:center;gap:10px;min-height:48px;padding:2px 2px 12px;display:flex}.bar .t{font:700 1.05rem DM Sans Variable}.bar .h{color:var(--muted);margin-right:auto;font-size:.9rem}.notice{background:var(--accent-soft);border-radius:14px;align-items:center;gap:12px;margin:0 2px 14px;padding:11px 14px;font-size:.9rem;display:flex}.notice .ic{width:18px;height:18px;color:var(--accent-ink)}.notice span{flex:1}.notice.plain{background:var(--surface-2)}.notice.plain .ic{color:var(--muted)}.scroll{scrollbar-width:thin;flex:1;padding:2px;overflow:auto}.grp{flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 12px;display:flex}.grp:not(:first-child){margin-top:26px}.grp b{font:700 .98rem DM Sans Variable}.grp>span{color:var(--muted);margin-right:auto;font-size:.86rem}.grp .select select{border-radius:10px;height:32px;font-size:.82rem}.grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px;display:grid}.tile{background:var(--surface);border:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:160px 190px;border-radius:16px;transition:border-color .15s,transform .15s;position:relative}.tile .open{text-align:left;cursor:zoom-in;border-radius:inherit;flex-direction:column;gap:8px;width:100%;padding:8px;display:flex}.tile .x{background:var(--surface);border:1px solid var(--line);width:28px;height:28px;color:var(--muted);box-shadow:var(--shadow);opacity:0;border-radius:50%;place-items:center;transition:opacity .15s;display:grid;position:absolute;top:12px;right:12px}.tile .x .ic{width:14px;height:14px}.tile:hover .x,.tile .x:focus-visible{opacity:1}.tile .x:hover{color:var(--accent-ink);border-color:var(--accent)}@media (hover:none){.tile .x{opacity:1}}.tile:hover{border-color:var(--accent);transform:translateY(-1px)}.tile .im{aspect-ratio:1;border-radius:11px;place-items:center;display:grid;overflow:hidden}.tile .im .cv{width:auto;max-width:100%;height:auto;max-height:100%}.tile .d{color:var(--muted);text-align:center;white-space:nowrap;text-overflow:ellipsis;padding-bottom:2px;font:500 .8rem/1.2 DM Sans Variable;overflow:hidden}.tile .d.warn{color:var(--accent-ink);font-weight:600}.tile.wait .im{opacity:.35}.detail{z-index:5;flex-direction:column;padding:16px 18px 18px;display:flex;position:absolute;inset:0}.detail .head{align-items:center;gap:12px;min-width:0;padding:0 2px 14px;display:flex}.detail .head b{white-space:nowrap;text-overflow:ellipsis;font:700 1.02rem DM Sans Variable;overflow:hidden}.detail .head span{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin-right:auto;font-size:.88rem;overflow:hidden}.detail .head .round[disabled]{visibility:hidden}.stage{border-radius:16px;flex:1;justify-content:center;align-items:center;min-height:0;padding:28px;display:flex}.stage .cvwrap{max-width:100%;max-height:100%;position:relative}.stage .handles{pointer-events:none;position:absolute}.stage .handles i{background:var(--surface);border:1.5px solid var(--accent);pointer-events:auto;touch-action:none;border-radius:4px;width:14px;height:14px;position:absolute}.stage .handles i[data-c=nw]{cursor:nwse-resize;top:-8px;left:-8px}.stage .handles i[data-c=ne]{cursor:nesw-resize;top:-8px;right:-8px}.stage .handles i[data-c=sw]{cursor:nesw-resize;bottom:-8px;left:-8px}.stage .handles i[data-c=se]{cursor:nwse-resize;bottom:-8px;right:-8px}.stage .handles em{color:var(--accent-ink);background:var(--surface);border:1px solid var(--line);white-space:nowrap;border-radius:99px;padding:5px 10px;font:600 .8rem/1 DM Sans Variable;position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%)}.dfoot{flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:14px;display:flex}.dfoot .info{color:var(--muted);font-size:.9rem}.dfoot .info b{color:var(--text);font-weight:600}.fix{background:var(--accent-soft);border-radius:99px;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto;padding:8px 8px 8px 14px;font-size:.88rem;display:flex}.fix .ic{width:17px;height:17px;color:var(--accent-ink)}.fix.plain{background:var(--surface-2)}.side{flex-direction:column;min-height:0;padding:22px 24px;display:flex}.side h3{margin-bottom:6px;font:700 1.1rem DM Sans Variable}.side .set{scrollbar-width:thin;flex:1;margin:0 -24px;padding:0 24px;overflow:auto}.side .foot{border-top:1px solid var(--line);padding-top:18px}.privacy{color:var(--muted);justify-content:center;align-items:center;gap:8px;margin-top:12px;font-size:.8rem;display:flex}.privacy .ic{width:14px;height:14px}@media (max-width:900px){body{overflow:auto}.screen{height:auto;min-height:100%}.top{padding:16px}.app{grid-template-columns:1fr;padding:0 16px 16px}.gallery{min-height:60vh}.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.detail{z-index:40;position:fixed;inset:8px}.side .set{overflow:visible}}.shead{justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px;display:flex}.shead h3{margin:0}.shead .select select{text-overflow:ellipsis;max-width:190px;height:34px;font-size:.82rem}.sec{color:var(--muted);border-top:1px solid var(--line);margin-top:6px;padding:22px 0 4px;font:700 .78rem/1 DM Sans Variable}.sec+.row{border-top:0}.lock{width:34px;height:34px;color:var(--muted);border:1px solid #0000;border-radius:10px;place-items:center;display:grid}.lock .ic{width:18px;height:18px}.lock.on{color:var(--accent-ink);background:var(--accent-soft)}.lock:hover{border-color:var(--line-2)}.fitrow{flex-direction:column;gap:8px;display:flex}.fitrow .lbl{color:var(--muted);font:600 .84rem/1 DM Sans Variable}.fitrow .h{margin:0}.seg.full{width:100%;display:flex}.seg.full button{flex:1;padding:7px 4px;font-size:.8rem}.input.text input{font:500 .92rem/1 DM Sans Variable}.link.small{text-align:center;font-size:.78rem}.note{padding:14px 0 4px}.cv .frame.cover{outline-style:solid}.wh{grid-template-columns:1fr 34px 1fr;gap:6px}.wh .input{flex-wrap:wrap;row-gap:3px;height:auto;padding:7px 12px 8px}.wh .input small:first-child{flex-basis:100%;font-size:.74rem}.wh .input input{flex:1;font-size:1.02rem}.set .row>.head{flex:1}.slide input[type=range]{width:100%;accent-color:var(--accent);margin:0}.slide .val{font-variant-numeric:tabular-nums;color:var(--accent-ink);white-space:nowrap;font:700 .98rem/1 DM Sans Variable}.est{color:var(--text);font:500 .86rem/1.4 DM Sans Variable;transition:opacity .2s}.est.busy{opacity:.45}.seg.views button{padding:6px 12px;font-size:.84rem}.stage .cvwrap.result .cv{outline:1px solid var(--line-2)}.stage .busy{background:var(--surface);border:1px solid var(--line);color:var(--muted);box-shadow:var(--shadow);border-radius:99px;padding:7px 14px;font:600 .84rem/1 DM Sans Variable;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:900px){.detail .head{flex-wrap:wrap}.seg.views{order:5;width:100%;display:flex}.seg.views button{flex:1}}.set .pad{flex:none;width:120px}.seg button[disabled]{opacity:.4;cursor:not-allowed}.model .btn{align-self:flex-start}.model .progress{gap:8px}.model .progress .l{font-size:.86rem}.model .h.ok{color:var(--text)}.model .h.warn{color:var(--accent-ink);margin-top:6px!important}.dfoot .bgc{color:var(--muted);align-items:center;gap:7px;font-size:.86rem;display:inline-flex}.dfoot .bgc i{border:1px solid var(--line-2);border-radius:5px;width:16px;height:16px}.set .head>.t{white-space:nowrap;flex-wrap:nowrap;flex:1;min-width:0}.seg.mode{margin:4px 0 10px}.seg.mode button{padding:7px 4px;font-size:.86rem}.hiddenhint{margin:-2px 0 10px;font-size:.82rem}.set.adv .sgrp{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;margin:0 -8px 12px;padding:2px 14px 6px}.set.adv .sgrp h4{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 0 4px;font:700 .72rem/1 DM Sans Variable}.set.adv .sgrp h4+.row{border-top:0}.set.adv .sgrp .input,.set.adv .sgrp .select select,.set.adv .sgrp .seg{background:var(--surface)}.set.adv .sgrp .seg button[aria-pressed=true]{background:var(--surface-2)}[data-theme=dark] .set.adv .sgrp .seg button[aria-pressed=true]{background:var(--line-2)}.set .t.sm{font-size:.9rem}.set:not(.adv)>.row:first-child{border-top:0}.name{-webkit-user-select:none;user-select:none;align-items:baseline;display:flex}.name .home{font:inherit;letter-spacing:inherit;padding:0}.name .dot{font:inherit;color:var(--accent-ink);margin:-10px -12px -10px -1px;padding:10px 12px 10px 1px;line-height:1}.name .dot span{transform-origin:50% 80%;display:inline-block}.name .dot:hover span{animation:.5s ease-in-out dot-wiggle}@keyframes dot-wiggle{30%{transform:translateY(-3px)scale(1.2)}60%{transform:translateY(1px)scale(.9)}}@media (prefers-reduced-motion:reduce){.name .dot:hover span{animation:none}}.dotball{z-index:90;background:var(--accent);pointer-events:none;will-change:transform;border-radius:50%;position:fixed;top:0;left:0;box-shadow:0 2px 6px #d4441a59}.ibtn{width:20px;height:20px;color:var(--faint);vertical-align:-4px;border-radius:50%;flex:none;place-items:center;display:inline-grid}.ibtn .ic{width:16px;height:16px}.ibtn:hover,.ibtn[aria-expanded=true]{color:var(--accent-ink)}.help{z-index:80;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:18px;width:294px;padding:12px 12px 14px;animation:.16s ease-out help-in;position:fixed;box-shadow:0 2px 6px #0000000f,0 18px 48px #00000029}.help .clip{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;height:150px;position:relative;overflow:hidden}.help b{margin:12px 4px 4px;font:700 .95rem/1.3 DM Sans Variable;display:block}.help p{color:var(--muted);margin:0 4px;font:400 .86rem/1.5 DM Sans Variable}.help p+p{margin-top:6px}@keyframes help-in{0%{opacity:0;transform:translateY(4px)}}.demo{--T:5s;--c1:#4f9384;--c2:#e0b43a;--sky:#a9cfdc;position:absolute;inset:0;overflow:hidden}[data-theme=dark] .demo{--c1:#5aa392;--sky:#6f97a5}.demo div,.demo svg,.demo img,.demo i{position:absolute}.demo *{animation-duration:var(--T);animation-timing-function:cubic-bezier(.45,0,.25,1);animation-iteration-count:infinite}.demo .dk{background-color:var(--check-b);background-image:conic-gradient(var(--check-a) 25%, transparent 0 50%, var(--check-a) 0 75%, transparent 0);background-size:10px 10px}.demo .win{border-radius:6px;overflow:hidden}.demo .flat,.demo .det-c{background:#f3efe6}.demo .det-c.busy{background:linear-gradient(135deg,#b8cdd2,#e8dcc4 55%,#c9b596)}.demo .hex{background:var(--c1);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}.demo .pin{background:var(--c2);border-radius:99px}.demo .fig{fill:var(--c1)}.demo .photo{background:linear-gradient(180deg, var(--sky) 0 58%, var(--c1) 58%);border-radius:2px;overflow:hidden}.demo .photo .sun{background:var(--c2);border-radius:50%;width:20%;height:36%;top:14%;left:18%}.demo .photo.tall .sun{width:30%;height:20%;top:12%;left:20%}.demo .photo.sq .sun{width:26%;height:26%;top:14%;left:18%}.demo .frm{outline:1.5px solid var(--accent)}.demo .frm.in{outline-offset:-1.5px}.demo .tgt{outline:1.5px dashed var(--accent);outline-offset:-1px;border-radius:2px}.demo .veil{background:var(--surface-2);opacity:0;animation-name:d-veil}.demo .lab{white-space:nowrap;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 9px;font:600 .7rem/1 DM Sans Variable;transform:translate(-50%)}.demo .lab.on{color:var(--accent-ink);border-color:var(--accent)}.demo .lab.code{font-family:JetBrains Mono,ui-monospace,monospace;font-weight:500}.demo .tiny{color:var(--muted);white-space:nowrap;font:500 .68rem/1 DM Sans Variable}.demo .tiny.end{transform:translate(-100%)}.demo .file{color:var(--text);white-space:nowrap;font:500 .68rem/1 JetBrains Mono,ui-monospace,monospace}.demo .file.out{text-overflow:ellipsis;max-width:136px;color:var(--accent-ink);overflow:hidden}.demo .file.dir{font-weight:700}.demo .file.other{color:var(--faint)}.demo .arrow{color:var(--faint);font:500 .8rem/1 DM Sans Variable}.demo .zip{border:1px solid var(--line-2);background:var(--surface);border-radius:10px}.demo .s1{animation-name:d-s1}.demo .s2{opacity:0;animation-name:d-s2}.demo .late{opacity:0;animation-name:d-late}.demo .grow{animation-name:d-grow}@keyframes d-s1{0%,24%,94%,to{opacity:1}34%,86%{opacity:0}}@keyframes d-s2{0%,24%,94%,to{opacity:0}34%,86%{opacity:1}}@keyframes d-late{0%,30%,90%,to{opacity:0}44%,82%{opacity:1}}@keyframes d-veil{0%,22%,92%,to{opacity:0}44%,82%{opacity:.82}}@keyframes d-grow{0%,18%,96%,to{left:var(--x0);top:var(--y0);width:var(--w0);height:var(--h0)}40%,84%{left:var(--x1);top:var(--y1);width:var(--w1);height:var(--h1)}}.demo .trim-zoom{animation-name:trim-zoom}.demo .trim-frm{animation-name:trim-frm}@keyframes trim-zoom{0%,48%,96%,to{transform:scale(1)}64%,82%{transform:scale(2.2)}}@keyframes trim-frm{0%,18%,96%,to{width:120px;height:120px;top:0;left:0;box-shadow:0 0 0 200px #0000}40%,84%{width:48px;height:40px;box-shadow:0 0 0 200px var(--veil);top:40px;left:36px}}.demo .uni-f0{width:30px;height:26px;top:10px;left:17px}.demo .uni-f1{animation-name:uni-f1}.demo .uni-f2{animation-name:uni-f2}@keyframes uni-f1{0%,18%,96%,to{width:30px;height:34px;top:2px;left:17px}40%,84%{width:30px;height:26px;top:10px;left:17px}}@keyframes uni-f2{0%,18%,96%,to{width:20px;height:3px;top:22px;left:22px}40%,84%{width:30px;height:26px;top:10px;left:17px}}.demo .uni-r{transform-origin:0 0;transform:translate(-27.1px,-18.5px)scale(1.846)}.demo .uni-r1{animation-name:uni-r1}.demo .uni-r2{animation-name:uni-r2}@keyframes uni-r1{0%,18%,96%,to{transform:translate(-13.2px,-2.8px)scale(1.412)}40%,84%{transform:translate(-27.1px,-18.5px)scale(1.846)}}@keyframes uni-r2{0%,18%,96%,to{transform:translate(-70.4px,-51.2px)scale(3.2)}40%,84%{transform:translate(-27.1px,-18.5px)scale(1.846)}}.demo .fit-contain .fit-i{animation-name:fit-contain}.demo .fit-cover .fit-i{animation-name:fit-cover}.demo .fit-stretch .fit-i{animation-name:fit-stretch}@keyframes fit-contain{0%,18%,96%,to{width:80px;height:45.4px;top:9.3px;left:-8px}40%,84%{width:64px;height:36.4px;top:13.8px;left:0}}@keyframes fit-cover{0%,18%,96%,to{width:80px;height:45.4px;top:9.3px;left:-8px}40%,84%{width:112.6px;height:64px;top:0;left:-24.3px}}@keyframes fit-stretch{0%,18%,96%,to{width:80px;height:45.4px;top:9.3px;left:-8px}40%,84%{width:64px;height:64px;top:0;left:0}}.demo .por-t{animation-name:por-t}.demo .por-i{animation-name:por-i}@keyframes por-t{0%,18%,96%,to{width:96px;height:64px;top:22px;left:86px}40%,84%{width:64px;height:96px;top:6px;left:102px}}@keyframes por-i{0%,18%,96%,to{width:42.7px;height:64px;top:22px;left:112.7px}40%,84%{width:64px;height:96px;top:6px;left:102px}}.demo .scan{background:var(--accent);opacity:0}.demo .det-t,.demo .det-b{width:100%;height:1.5px;left:0}.demo .det-l,.demo .det-r{width:1.5px;height:100%;top:0}.demo .det-t{animation-name:det-t}.demo .det-b{animation-name:det-b}.demo .det-l{animation-name:det-l}.demo .det-r{animation-name:det-r}.demo .det-f{opacity:0;animation-name:det-f}@keyframes det-t{0%{opacity:0;top:0}8%{opacity:1;top:0}42%{opacity:1;top:22px}54%,to{opacity:0;top:22px}}@keyframes det-b{0%{opacity:0;top:102.5px}8%{opacity:1;top:102.5px}42%{opacity:1;top:81px}54%,to{opacity:0;top:81px}}@keyframes det-l{0%{opacity:0;left:0}8%{opacity:1;left:0}42%{opacity:1;left:55px}54%,to{opacity:0;left:55px}}@keyframes det-r{0%{opacity:0;left:148.5px}8%{opacity:1;left:148.5px}42%{opacity:1;left:94px}54%,to{opacity:0;left:94px}}@keyframes det-f{0%,42%{opacity:0}52%,88%{opacity:1}to{opacity:0}}.demo .halo{background:radial-gradient(closest-side,#4f938461,#4f93841f 70%,#0000);border-radius:50%}.demo .tol-f{animation-name:tol-f}.demo .rail{background:var(--line-2);border-radius:99px}.demo .knob{background:var(--accent);border-radius:50%;width:14px;height:14px;animation-name:tol-k;top:115px;box-shadow:0 1px 3px #00000040}@keyframes tol-f{0%,18%,96%,to{width:66px;height:66px;top:14px;left:42px}40%,84%{width:38px;height:33px;top:31px;left:56px}}@keyframes tol-k{0%,18%,96%,to{left:82px}40%,84%{left:172px}}.demo .rb-w{background:#fff;animation-name:rb-w}@keyframes rb-w{0%,18%,96%,to{clip-path:inset(0)}44%,84%{clip-path:inset(50%)}}.demo .nu-off{animation-name:d-grow,d-blur}.demo .nu-on{left:var(--x0);top:var(--y0);width:var(--w0);height:var(--h0)}@keyframes d-blur{0%,18%,96%,to{filter:blur()}40%,84%{filter:blur(1.4px)}}.demo .pa-i{animation-name:pa-i}.demo .pa-i.crisp{image-rendering:pixelated}@keyframes pa-i{0%,18%,96%,to{width:16px;height:16px;top:32px;left:32px}40%,84%{width:72px;height:72px;top:4px;left:4px}}.demo .pad-h{animation-name:pad-h}.demo .pad-g{outline:1px dashed var(--accent);outline-offset:-17px;opacity:0;animation-name:d-late}@keyframes pad-h{0%,18%,96%,to{width:96px;height:83.2px;top:18.4px;left:86px}40%,84%{width:64px;height:55.5px;top:32.3px;left:102px}}.demo .art{background:radial-gradient(circle at 30% 30%, var(--c2), transparent 45%), radial-gradient(circle at 70% 65%, var(--c1), transparent 55%), linear-gradient(135deg, var(--sky), #e9d9b8);border-radius:8px}.demo .sbar{background:var(--surface);border:1px solid var(--line);border-radius:99px;overflow:hidden}.demo .sp-bar{background:var(--accent);border-radius:99px;animation-name:sp-bar;top:0;bottom:0;left:0}@keyframes sp-bar{0%,18%,96%,to{width:100%}40%,84%{width:32%}}.demo .bg-fill{opacity:0;animation-name:d-fill}@keyframes d-fill{0%,18%,96%,to{opacity:0}40%,84%{opacity:1}}.demo .op-f{animation-name:op-f}@keyframes op-f{0%,18%,96%,to{opacity:1}40%,84%{opacity:var(--o)}}.demo .nm-in{opacity:0;animation-name:nm-in}@keyframes nm-in{0%,14%{opacity:0;transform:translate(-8px)}28%,86%{opacity:1;transform:none}96%,to{opacity:0;transform:none}}.demo .ghost{opacity:.22;inset:0}.demo .ext-c{animation-name:ext-c;inset:0}.demo .ext-t{width:100px;animation-name:ext-t;left:84px}@keyframes ext-c{0%,18%,96%,to{clip-path:inset(34px 84px 30px)}40%,84%{clip-path:inset(12px 84px 30px)}}@keyframes ext-t{0%,18%,96%,to{height:86px;top:34px}40%,84%{height:108px;top:12px}}@media (prefers-reduced-motion:reduce){.demo *{animation-play-state:paused!important;animation-delay:calc(var(--T) * -.6)!important}.help{animation:none}}