/* Shared ITTY geometry. The account summary and collection must render the same costume. */
.itty-avatar { --head: #292c35; --edge: var(--paper); --eyes: var(--lime); --body: var(--yellow); position: relative; z-index: 1; display: block; width: 108px; height: 124px; }
.itty-avatar.medium { width: 82px; height: 96px; transform: scale(.88); transition: transform .28s cubic-bezier(.25, 1, .5, 1); }
.avatar-antenna { position: absolute; top: 4px; left: 51px; width: 7px; height: 23px; background: var(--edge); }
.avatar-antenna::before { position: absolute; top: -6px; left: -5px; width: 17px; height: 17px; background: var(--eyes); content: ""; transform: rotate(45deg); }
.avatar-head { position: absolute; top: 27px; left: 10px; width: 88px; height: 67px; border: 8px solid var(--edge); background: var(--head); }
.avatar-head::before, .avatar-head::after { position: absolute; top: 20px; width: 13px; height: 17px; background: var(--eyes); content: ""; }
.avatar-head::before { left: 16px; }
.avatar-head::after { right: 16px; }
.avatar-mouth { position: absolute; z-index: 2; top: 77px; left: 44px; width: 21px; height: 7px; background: var(--edge); }
.avatar-body { position: absolute; bottom: 0; left: 31px; width: 47px; height: 31px; background: var(--body); }
.avatar-body::before, .avatar-body::after { position: absolute; top: 9px; width: 18px; height: 8px; background: var(--body); content: ""; }
.avatar-body::before { left: -18px; }
.avatar-body::after { right: -18px; }
.avatar-mark { position: absolute; z-index: 4; pointer-events: none; }
.itty-avatar[data-costume="campus"] { --head: #27313a; --edge: #e8f0df; --eyes: #baff29; --body: #62a8ff; }
.itty-avatar[data-costume="campus"] .avatar-mark { top: 18px; left: 5px; width: 98px; height: 12px; background: #62a8ff; transform: skewX(-14deg); }
.itty-avatar[data-costume="office"] { --head: #27282e; --edge: #efece2; --eyes: #ffd83d; --body: #d7d4cb; }
.itty-avatar[data-costume="office"] .avatar-mark { bottom: 8px; left: 50px; width: 9px; height: 23px; background: #ff7048; clip-path: polygon(50% 0,100% 35%,70% 100%,30% 100%,0 35%); }
.itty-avatar[data-costume="queue-pilot"] { --head: #211f1c; --edge: #ffd83d; --eyes: #ff7048; --body: #ff7048; }
.itty-avatar[data-costume="queue-pilot"] .avatar-mark { top: 41px; left: 3px; width: 102px; height: 14px; border: 4px solid #ffd83d; border-left: 0; border-right: 0; }
.itty-avatar[data-costume="type-ninja"] { --head: #1f2420; --edge: #dce8d6; --eyes: #baff29; --body: #232a24; }
.itty-avatar[data-costume="type-ninja"] .avatar-mark { top: 31px; left: 18px; width: 72px; height: 12px; background: #baff29; box-shadow: 52px 5px 0 -3px #baff29; }
.itty-avatar[data-costume="math-mage"] { --head: #252238; --edge: #eee9d8; --eyes: #62a8ff; --body: #7164af; }
.itty-avatar[data-costume="math-mage"] .avatar-mark { top: -2px; left: 25px; width: 60px; height: 33px; background: #7164af; clip-path: polygon(50% 0,100% 100%,0 100%); }
.itty-avatar[data-costume="timekeeper"] { --head: #22292d; --edge: #e8eee9; --eyes: #62a8ff; --body: #c9d6d2; }
.itty-avatar[data-costume="timekeeper"] .avatar-mark { top: 40px; left: 36px; width: 38px; height: 38px; border: 5px solid #62a8ff; border-radius: 50%; box-shadow: inset 10px 0 0 -8px #62a8ff; }
.itty-avatar[data-costume="archivist"] { --head: #302720; --edge: #eee6d8; --eyes: #ffd83d; --body: #a47350; }
.itty-avatar[data-costume="archivist"] .avatar-mark { top: 48px; left: 17px; width: 76px; height: 28px; border: 5px solid #d0aa72; border-radius: 50%; }
.itty-avatar[data-costume="streak-flare"] { --head: #34201c; --edge: #fff0d8; --eyes: #ffd83d; --body: #ff7048; }
.itty-avatar[data-costume="streak-flare"] .avatar-mark { top: -7px; left: 32px; width: 46px; height: 37px; background: #ff7048; clip-path: polygon(48% 0,62% 33%,83% 15%,76% 58%,100% 64%,66% 100%,25% 96%,0 64%,27% 49%); }
.itty-avatar[data-costume="pro-signal"] { --head: #20251c; --edge: #baff29; --eyes: #ffd83d; --body: #baff29; }
.itty-avatar[data-costume="pro-signal"] .avatar-mark { top: 15px; left: 16px; width: 78px; height: 18px; background: #ffd83d; clip-path: polygon(0 100%,12% 0,34% 70%,50% 0,67% 70%,88% 0,100% 100%); }
.itty-avatar[data-costume="signal-slime"] { --head: #587d37; --edge: #d9f2b0; --eyes: #baff29; --body: #7bab4a; }
.itty-avatar[data-costume="signal-slime"] .avatar-antenna { display: none; }
.itty-avatar[data-costume="signal-slime"] .avatar-head { top: 18px; left: 6px; width: 96px; height: 82px; border-width: 7px; border-radius: 48% 54% 40% 46%; }
.itty-avatar[data-costume="signal-slime"] .avatar-head::before, .itty-avatar[data-costume="signal-slime"] .avatar-head::after { top: 27px; }
.itty-avatar[data-costume="signal-slime"] .avatar-mouth { top: 76px; background: #d9f2b0; }
.itty-avatar[data-costume="signal-slime"] .avatar-body { bottom: 0; left: 28px; width: 52px; height: 15px; border-radius: 50%; }
.itty-avatar[data-costume="signal-slime"] .avatar-body::before, .itty-avatar[data-costume="signal-slime"] .avatar-body::after { display: none; }
.itty-avatar[data-costume="signal-slime"] .avatar-mark { top: 4px; right: 5px; width: 14px; height: 14px; border: 4px solid #d9f2b0; border-radius: 50%; box-shadow: -17px -5px 0 -3px #7bab4a; }
.itty-avatar[data-costume="orbit-nine"] { --head: #24333d; --edge: #dde9f0; --eyes: #66d8ff; --body: #ff7652; }
.itty-avatar[data-costume="orbit-nine"] .avatar-head { top: 24px; left: 10px; width: 88px; height: 88px; border-radius: 50%; }
.itty-avatar[data-costume="orbit-nine"] .avatar-head::before, .itty-avatar[data-costume="orbit-nine"] .avatar-head::after { top: 27px; }
.itty-avatar[data-costume="orbit-nine"] .avatar-mouth { top: 83px; background: #66d8ff; }
.itty-avatar[data-costume="orbit-nine"] .avatar-body { bottom: -5px; left: 45px; width: 18px; height: 12px; }
.itty-avatar[data-costume="orbit-nine"] .avatar-body::before, .itty-avatar[data-costume="orbit-nine"] .avatar-body::after { top: 8px; width: 10px; height: 13px; background: #ffd83d; }
.itty-avatar[data-costume="orbit-nine"] .avatar-body::before { left: -8px; transform: skewX(-18deg); }
.itty-avatar[data-costume="orbit-nine"] .avatar-body::after { right: -8px; transform: skewX(18deg); }
.itty-avatar[data-costume="orbit-nine"] .avatar-mark { top: 48px; left: -3px; width: 114px; height: 42px; border: 5px solid #66d8ff; border-right-color: transparent; border-radius: 50%; transform: rotate(-15deg); }
.itty-avatar[data-costume="glitch-ghost"] { --head: #ece8ff; --edge: transparent; --eyes: #ff7652; --body: transparent; }
.itty-avatar[data-costume="glitch-ghost"] .avatar-antenna, .itty-avatar[data-costume="glitch-ghost"] .avatar-body { display: none; }
.itty-avatar[data-costume="glitch-ghost"] .avatar-head { top: 8px; left: 5px; width: 98px; height: 112px; border: 0; clip-path: polygon(12% 0,88% 0,100% 17%,100% 100%,76% 82%,58% 100%,39% 82%,18% 100%,0 82%,0 17%); }
.itty-avatar[data-costume="glitch-ghost"] .avatar-head::before, .itty-avatar[data-costume="glitch-ghost"] .avatar-head::after { top: 38px; }
.itty-avatar[data-costume="glitch-ghost"] .avatar-mouth { top: 77px; background: #262338; }
.itty-avatar[data-costume="glitch-ghost"] .avatar-mark { top: 24px; right: -4px; width: 25px; height: 8px; background: #66d8ff; box-shadow: -96px 31px 0 #ff7652, 3px 63px 0 #baff29; }
.itty-avatar[data-costume="void-monolith"] { --head: #0d0e14; --edge: #676c7b; --eyes: #ff7652; --body: #676c7b; }
.itty-avatar[data-costume="void-monolith"] .avatar-antenna, .itty-avatar[data-costume="void-monolith"] .avatar-mouth { display: none; }
.itty-avatar[data-costume="void-monolith"] .avatar-head { top: 5px; left: 32px; width: 44px; height: 108px; border-width: 5px; clip-path: polygon(50% 0,100% 10%,88% 100%,12% 100%,0 10%); }
.itty-avatar[data-costume="void-monolith"] .avatar-head::before { top: 39px; left: 13px; width: 10px; height: 24px; }
.itty-avatar[data-costume="void-monolith"] .avatar-head::after { display: none; }
.itty-avatar[data-costume="void-monolith"] .avatar-body { bottom: 0; left: 39px; width: 30px; height: 8px; }
.itty-avatar[data-costume="void-monolith"] .avatar-body::before, .itty-avatar[data-costume="void-monolith"] .avatar-body::after { display: none; }
.itty-avatar[data-costume="void-monolith"] .avatar-mark { top: 24px; left: 17px; width: 7px; height: 7px; background: #676c7b; box-shadow: 77px 25px 0 #676c7b, -7px 66px 0 #ff7652, 68px 83px 0 #3d414c; }

.itty-avatar[data-costume="prism-core"] { --head: #143a42; --edge: #90f1df; --eyes: #f5fcff; }
.itty-avatar[data-costume="prism-core"] .avatar-antenna, .itty-avatar[data-costume="prism-core"] .avatar-mouth { display: none; }
.itty-avatar[data-costume="prism-core"] .avatar-head { top: 14px; left: 17px; width: 74px; height: 91px; border: 0; background: #90f1df; clip-path: polygon(50% 0,100% 40%,50% 100%,0 40%); }
.itty-avatar[data-costume="prism-core"] .avatar-head::before { inset: 6px; width: auto; height: auto; background: #20565d; clip-path: polygon(50% 0,100% 40%,50% 100%,0 40%); }
.itty-avatar[data-costume="prism-core"] .avatar-head::after { top: 28px; left: 29px; width: 16px; height: 27px; background: #f5fcff; clip-path: polygon(50% 0,100% 40%,50% 100%,0 40%); }
.itty-avatar[data-costume="prism-core"] .avatar-body { bottom: 6px; left: 33px; width: 42px; height: 6px; border: 2px solid #4da99d; background: transparent; }
.itty-avatar[data-costume="prism-core"] .avatar-body::before, .itty-avatar[data-costume="prism-core"] .avatar-body::after { display: none; }
.itty-avatar[data-costume="prism-core"] .avatar-mark { top: 38px; left: 2px; width: 11px; height: 11px; background: #ff8fb5; transform: rotate(45deg); box-shadow: 58px -57px 0 -2px #90f1df, 75px -5px 0 -2px #ffd83d; animation: itty-prism-pulse 3s ease-in-out infinite; }
.itty-avatar[data-costume="cassette-dj"] { --head: #ff8fb5; --edge: #f6eee9; --eyes: #252733; --body: #ff8fb5; }
.itty-avatar[data-costume="cassette-dj"] .avatar-antenna { display: none; }
.itty-avatar[data-costume="cassette-dj"] .avatar-head { top: 27px; left: 10px; width: 88px; height: 64px; border-width: 6px; border-radius: 9px; }
.itty-avatar[data-costume="cassette-dj"] .avatar-head::before, .itty-avatar[data-costume="cassette-dj"] .avatar-head::after { box-sizing: border-box; top: 13px; width: 22px; height: 22px; border: 6px solid #252733; border-radius: 50%; background: #f6eee9; }
.itty-avatar[data-costume="cassette-dj"] .avatar-head::before { left: 10px; }
.itty-avatar[data-costume="cassette-dj"] .avatar-head::after { right: 10px; }
.itty-avatar[data-costume="cassette-dj"] .avatar-mouth { top: 73px; left: 35px; width: 38px; height: 8px; background: #252733; clip-path: polygon(10% 0,90% 0,100% 100%,0 100%); }
.itty-avatar[data-costume="cassette-dj"] .avatar-mark { top: 13px; left: 1px; width: 106px; height: 65px; border: 7px solid #62a8ff; border-bottom: 0; border-radius: 34px 34px 0 0; }
.itty-avatar[data-costume="cassette-dj"] .avatar-mark::before, .itty-avatar[data-costume="cassette-dj"] .avatar-mark::after { position: absolute; top: 27px; width: 13px; height: 29px; border: 3px solid #62a8ff; background: #252733; content: ""; }
.itty-avatar[data-costume="cassette-dj"] .avatar-mark::before { left: -9px; }
.itty-avatar[data-costume="cassette-dj"] .avatar-mark::after { right: -9px; }
.itty-avatar[data-costume="cassette-dj"] .avatar-body { bottom: 1px; left: 20px; width: 68px; height: 23px; border: 4px solid #f6eee9; background: #252733; }
.itty-avatar[data-costume="cassette-dj"] .avatar-body::before { top: 4px; left: 8px; width: 7px; height: 9px; background: #ffd83d; box-shadow: 12px -3px #90f1df, 24px 0 #ff8fb5, 36px -3px #62a8ff; animation: itty-equalizer 1.4s steps(2, end) infinite; }
.itty-avatar[data-costume="cassette-dj"] .avatar-body::after { display: none; }
.itty-avatar[data-costume="paper-courier"] { --head: #fff7e6; --edge: #ffe09b; --eyes: #232d42; }
.itty-avatar[data-costume="paper-courier"] .avatar-antenna, .itty-avatar[data-costume="paper-courier"] .avatar-mouth { display: none; }
.itty-avatar[data-costume="paper-courier"] .avatar-head { top: 12px; left: 0; width: 108px; height: 81px; border: 0; clip-path: polygon(50% 0,100% 88%,64% 71%,50% 100%,36% 71%,0 88%); }
.itty-avatar[data-costume="paper-courier"] .avatar-head::before { top: 0; left: 54px; width: 54px; height: 81px; background: #e4b95f; clip-path: polygon(0 0,100% 88%,28% 71%,0 100%); }
.itty-avatar[data-costume="paper-courier"] .avatar-head::after { top: 0; left: 51px; width: 5px; height: 78px; background: #fff7e6; }
.itty-avatar[data-costume="paper-courier"] .avatar-body { bottom: 14px; left: 38px; width: 10px; height: 12px; background: #90f1df; box-shadow: 22px 0 #90f1df; }
.itty-avatar[data-costume="paper-courier"] .avatar-body::before, .itty-avatar[data-costume="paper-courier"] .avatar-body::after { display: none; }
.itty-avatar[data-costume="paper-courier"] .avatar-mark { top: 60px; left: 19px; width: 14px; height: 14px; border: 3px solid #ff7652; transform: rotate(-12deg); }
@keyframes itty-prism-pulse { 50% { opacity: .4; } }
@keyframes itty-equalizer { 50% { transform: scaleY(.55); } }
@media (prefers-reduced-motion: reduce) {
  .itty-avatar .avatar-mark, .itty-avatar .avatar-body::before { animation: none !important; }
}