.av{--av-fs:clamp(11px, 3.2cqw, 14px);--av-loop:16s;aspect-ratio:4/5;background-color:var(--ink);font-size:var(--av-fs);border-radius:24px;line-height:1;position:relative;overflow:hidden;container-type:inline-size}.av-inner{position:absolute;inset:0}.av-inner *{animation-duration:var(--av-loop);animation-iteration-count:infinite;animation-timing-function:var(--ease-brand);animation-fill-mode:backwards}.av-bar{justify-content:space-between;align-items:center;display:flex;position:absolute;top:5.5cqw;left:6cqw;right:6cqw}.av-file{color:var(--muted-dark);font-family:var(--font-mono);align-items:center;gap:.7em;display:inline-flex}.av-chip{background:var(--paper);color:var(--ink);font-family:var(--font-sans);letter-spacing:.02em;border-radius:.22em;padding:.28em .38em .22em;font-weight:700;position:relative}.av-chip-pixel{background:var(--orange);outline:.09em solid var(--ink);width:.48em;height:.48em;position:absolute;top:-.24em;right:-.24em}.av-publish{border:1px solid var(--line-dark);color:var(--paper);border-radius:.6em;padding:.5em .95em;font-weight:500;position:relative;overflow:hidden}.av-publish-on{background:var(--orange);color:var(--ink);justify-content:center;align-items:center;animation-name:av-press;display:flex;position:absolute;inset:0}.av-note-wrap{width:34cqw;position:absolute}.av-note{opacity:0;border-radius:1.6cqw;flex-direction:column;gap:1.8cqw;padding:4cqw 3.5cqw 3.5cqw;animation-name:av-note;display:flex;position:relative}.av-note i{background:#1414162e;border-radius:1cqw;height:1.6cqw;display:block}.av-note--sand{background:var(--sand)}.av-note--orange{background:var(--orange)}.av-note--orange i{background:#14141659}.av-note--paper{background:var(--paper)}.av-pin{background:var(--orange);outline:.5cqw solid var(--ink);width:2.4cqw;height:2.4cqw;position:absolute;top:-1.2cqw;left:calc(50% - 1.2cqw)}.av-pin--ink{background:var(--ink)}.av-sel{border:1.5px solid var(--orange);opacity:0;animation-name:av-sel;position:absolute;inset:-1.6cqw}.av-sel--late{animation-delay:calc(var(--av-loop) * .09)}.av-frame{width:72cqw;height:80cqw;animation-name:av-frame;position:absolute;top:21cqw;left:14cqw}.av-frame-label{color:var(--muted-dark);font-family:var(--font-mono);white-space:nowrap;font-size:clamp(11px,2.9cqw,12.5px);position:absolute;top:-4.4cqw;left:0}.av-board{background:var(--paper);border-radius:3cqw;position:absolute;inset:0}.av-w{background:var(--line);transform-origin:0;opacity:0;border-radius:.8cqw;animation-name:av-draw;position:absolute}.av-w--box{background:0 0;border:1.5px dashed #5e5a5373}.av-w--img{background:linear-gradient(to top right,#0000 49.6%,#5e5a5347 49.6% 50.4%,#0000 50.4%),linear-gradient(to bottom right,#0000 49.6%,#5e5a5347 49.6% 50.4%,#0000 50.4%);border-radius:2cqw}.av-u{animation-name:av-fill;position:absolute}.av-u--late{animation-name:av-fill-late}.av-logo{background:var(--ink);border-radius:1cqw;width:5cqw;height:5cqw}.av-logo-pixel{background:var(--orange);outline:.5cqw solid var(--paper);width:2cqw;height:2cqw;position:absolute;top:-.8cqw;right:-.8cqw}.av-menu{gap:2cqw;width:18cqw;height:1.4cqw;display:flex}.av-menu i{background:#1414164d;border-radius:1cqw;flex:1}.av-hero{background:var(--orange);border-radius:2cqw;width:62cqw;height:26cqw;overflow:hidden}.av-bars{align-items:flex-end;gap:3cqw;display:flex;position:absolute;inset:5cqw 7cqw 0}.av-bars i{background:var(--ink);transform-origin:bottom;border-radius:1cqw 1cqw 0 0;flex:1;animation-name:av-bar}.av-line{background:#14141638;border-radius:1cqw;height:1.8cqw;left:5cqw}.av-line--title{background:var(--ink);height:4cqw}.av-button{background:var(--orange);border-radius:1.6cqw;justify-content:center;align-items:center;width:24cqw;height:7cqw;display:flex;top:69cqw;left:5cqw}.av-button i{background:var(--ink);border-radius:1cqw;width:10cqw;height:1.4cqw}.av-live{z-index:2;background:var(--ink);color:var(--paper);border-radius:999px;align-items:center;gap:.5em;padding:.45em .8em;font-weight:500;animation-name:av-live;display:inline-flex;position:absolute;top:-3.2cqw;right:4cqw}.av-live i{background:var(--orange);width:.6em;height:.6em}.av-burst{z-index:1;position:absolute;top:0;right:12cqw}.av-burst>span{position:absolute}.av-burst i{background:var(--orange);opacity:0;width:2cqw;height:2cqw;margin:-1cqw 0 0 -1cqw;animation-name:av-pop;display:block}.av-toast{border:1px solid var(--line-dark);background:var(--ink);width:max-content;color:var(--paper);white-space:nowrap;border-radius:.8em;align-items:center;gap:.6em;margin-inline:auto;padding:.55em .9em;font-weight:500;animation-name:av-toast;display:flex;position:absolute;bottom:-4.5cqw;left:0;right:0}.av-toast i{background:var(--orange);width:1.5em;height:1.5em;color:var(--ink);place-items:center;font-size:.8em;font-style:normal;font-weight:700;display:grid}.av-steps{justify-content:space-between;padding-top:3.2cqw;display:flex;position:absolute;bottom:6cqw;left:6cqw;right:6cqw}.av-steps:before,.av-progress{content:"";background:var(--line-dark);height:2px;position:absolute;top:0;left:0;right:0}.av-progress{background:var(--orange);transform-origin:0;animation-name:av-progress;animation-timing-function:linear}.av-step{align-items:center;gap:.5em;display:inline-flex}.av-mark{border:1.5px solid #b3aea480;width:.7em;height:.7em;position:relative}.av-mark-on{background:var(--orange);position:absolute;inset:-1.5px}.av-label{color:var(--muted-dark);font-weight:500;position:relative}.av-label-on{color:var(--paper);position:absolute;top:0;left:0}.av-mark-on,.av-label-on{opacity:0;animation-name:av-stage;animation-timing-function:ease}.av-step:last-child .av-mark-on,.av-step:last-child .av-label-on{opacity:1}.av-cursor{z-index:5;animation-name:av-cursor;animation-timing-function:cubic-bezier(.45,0,.25,1);position:absolute;top:0;left:0;transform:translate(80cqw,9cqw)}.av-arrow{transform-origin:1.5px 1.5px;width:clamp(16px,5cqw,22px);height:auto;animation-name:av-click;animation-timing-function:ease-out;display:block}.av-arrow path{stroke:var(--paper)}.av-tag{background:var(--orange);color:var(--ink);white-space:nowrap;border-radius:5px;padding:.3em .5em;font-size:clamp(11px,3cqw,13px);font-weight:500;position:absolute;top:85%;left:70%}.av-ripple{border:1.5px solid var(--orange);opacity:0;width:6cqw;height:6cqw;animation-name:av-ripple;animation-timing-function:ease-out;position:absolute;top:-3cqw;left:-3cqw}@media (prefers-reduced-motion:reduce){.av *{animation:none!important}}@keyframes av-note{0%{opacity:0;transform:translateY(3cqw)scale(.94)}4%{opacity:1;transform:none}21%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-2cqw)scale(.97)}to{opacity:0;transform:translateY(3cqw)scale(.94)}}@keyframes av-sel{0%,7.9%{opacity:0}8%,12.5%{opacity:1}13.5%,to{opacity:0}}@keyframes av-frame{0%,26.5%{opacity:0;transform:scale(.95)}31%{opacity:1;transform:none}94%{opacity:1;transform:none}98%{opacity:0;transform:scale(.97)}to{opacity:0;transform:scale(.95)}}@keyframes av-draw{0%,29%{opacity:0;transform:scaleX(0)}30%{opacity:1}35%{transform:scaleX(1)}52%{opacity:1;transform:scaleX(1)}56%{opacity:0;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}@keyframes av-fill{0%,50%{opacity:0;transform:translateY(1.2cqw)scale(.98)}55%{opacity:1;transform:none}94%{opacity:1;transform:none}97%,to{opacity:0;transform:translateY(1.2cqw)scale(.98)}}@keyframes av-fill-late{0%,62%{opacity:0;transform:scale(.85)}65%{opacity:1;transform:none}94%{opacity:1;transform:none}97%,to{opacity:0;transform:scale(.85)}}@keyframes av-bar{0%,54%{transform:scaleY(0)}61%,94%{transform:scaleY(1)}97%,to{transform:scaleY(0)}}@keyframes av-live{0%,76.5%{opacity:0;transform:translateY(1.5cqw)scale(.9)}79.5%{opacity:1;transform:none}94%{opacity:1;transform:none}97%,to{opacity:0;transform:translateY(1.5cqw)scale(.9)}}@keyframes av-pop{0%,76.5%{opacity:0;transform:translate(0)scale(.4)}77.5%{opacity:1}85%,to{opacity:0;transform:translate(9cqw)scale(1)}}@keyframes av-toast{0%,78.5%{opacity:0;transform:translateY(3cqw)}82%{opacity:1;transform:none}93%{opacity:1;transform:none}96%,to{opacity:0;transform:translateY(3cqw)}}@keyframes av-press{0%,74.8%{opacity:0}75.5%,88%{opacity:1}92%,to{opacity:0}}@keyframes av-stage{0%,22%{opacity:1}25%,97%{opacity:0}to{opacity:1}}@keyframes av-progress{0%{opacity:0;transform:scaleX(0)}2%{opacity:1;transform:scaleX(.02)}96%{opacity:1;transform:scaleX(1)}99.5%{opacity:0;transform:scaleX(1)}to{opacity:0;transform:scaleX(0)}}@keyframes av-cursor{0%{transform:translate(78cqw,58cqw)}5%,10%{transform:translate(27cqw,30cqw)}14.5%,19%{transform:translate(43cqw,70cqw)}25%,29%{transform:translate(14cqw,21cqw)}40%,44%{transform:translate(80cqw,99cqw)}48.5%,53%{transform:translate(50cqw,48cqw)}60%,64%{transform:translate(31cqw,93cqw)}73%,82%{transform:translate(80cqw,9cqw)}92%,to{transform:translate(78cqw,58cqw)}}@keyframes av-click{0%,7%,9.5%,16%,18.5%,26%,28.5%,40%,42.5%,49%,51.5%,61.5%,64%,74%,76.5%,to{transform:scale(1)}8%,17%,27%,41%,50%,62.5%,75%{transform:scale(.78)}}@keyframes av-ripple{0%,7.5%,16.5%,26.5%,40.5%,49.5%,62%,74.5%,to{opacity:0;transform:scale(.3)}8%,17%,27%,41%,50%,62.5%,75%{opacity:.9;transform:scale(.3)}12%,21%,31%,45%,54%,66.5%,79%{opacity:0;transform:scale(1.7)}}
