@charset "UTF-8";.hsc--grafik .hg-art{left: 88px;top: 58px;width: 226px;height: 300px;border-radius: 16px;overflow: hidden;padding: 16px}.hsc--grafik .hg-hero{height: 108px;border-radius: 10px;background: linear-gradient(140deg,var(--c1),var(--c2) 60%,var(--c3));position: relative;overflow: hidden;animation: hgIn 1.1s var(--ease) .1s both}.hsc--grafik .hg-hero::after{content: "";position: absolute;inset: 0;background: linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);transform: translateX(-100%);animation: hgShine 8s var(--ease) infinite}.hsc--grafik .hg-tl{margin-top: 14px;display: grid;gap: 9px}.hsc--grafik .hg-tl i{display: block;height: 8px;border-radius: 99px;background: var(--mist-2);animation: hgIn 1.1s var(--ease) var(--dly) both}.hsc--grafik .hg-tl i.w1{width: 82%;height: 13px;background: color-mix(in srgb,var(--c3) 60%,var(--mist-2))}.hsc--grafik .hg-tl i.w2{width: 100%}.hsc--grafik .hg-tl i.w3{width: 88%}.hsc--grafik .hg-tl i.w4{width: 62%}.hsc--grafik .hg-badge{position: absolute;left: 16px;bottom: 16px;right: 16px;display: flex;align-items: center;justify-content: space-between;padding: 9px 12px;border-radius: 10px;background: color-mix(in srgb,var(--c2) 10%,#fff);border: 1px dashed color-mix(in srgb,var(--c2) 40%,transparent);font-size: 10px;color: var(--c3);font-weight: 500;animation: hgIn 1.1s var(--ease) .8s both}.hsc--grafik .hg-guide{position: absolute;background: color-mix(in srgb,var(--c2) 34%,transparent)}.hsc--grafik .hg-ink{right: 16px;top: 74px;width: 150px;padding: 13px;z-index: 4}.hsc--grafik .hg-inks{display: grid;gap: 9px;margin-top: 9px}.hsc--grafik .hg-irow{display: flex;align-items: center;gap: 8px}.hsc--grafik .hg-irow b{width: 15px;font-size: 9.5px;font-weight: 600;color: var(--ink-400)}.hsc--grafik .hg-irow .hsc-bar{flex: 1;height: 6px;overflow: hidden}.hsc--grafik .hg-irow .hsc-bar span{display: block;height: 100%;border-radius: 99px;transform-origin: left;animation: hgInk 5s var(--ease) infinite;animation-delay: var(--dly)}.hsc--grafik .hg-cards{position: absolute;left: 24px;bottom: 52px;width: 176px;height: 108px;z-index: 4}.hsc--grafik .hg-cards > span{position: absolute;width: 148px;height: 88px;border-radius: 12px;background: #fff;border: 1px solid var(--line);box-shadow: 0 14px 28px -14px rgba(16,32,70,.4);padding: 12px;animation: hgStack 6s var(--ease) infinite;animation-delay: var(--dly)}.hsc--grafik .hg-cards > span::before{content: "";display: block;width: 30px;height: 30px;border-radius: 9px;background: linear-gradient(140deg,var(--c1),var(--c3))}.hsc--grafik .hg-cards > span::after{content: "";display: block;margin-top: 9px;width: 74%;height: 6px;border-radius: 99px;background: var(--mist-2);box-shadow: 0 11px 0 -3px var(--mist-2),0 21px 0 -3px var(--mist-2)}.hsc--grafik .hg-c1{left: 20px;top: 36px;z-index: 5}.hsc--grafik .hg-c2{right: 24px;bottom: 44px;z-index: 5}@keyframes hgShine{0%,40%{transform: translateX(-100%)}62%,100%{transform: translateX(120%)}}@keyframes hgIn{from{opacity: 0;transform: translateY(12px)}to{opacity: 1;transform: none}}@keyframes hgInk{0%,100%{transform: scaleX(.28)}50%{transform: scaleX(1)}}@keyframes hgStack{0%,100%{transform: translate(var(--tx),var(--ty)) rotate(var(--rot))}50%{transform: translate(var(--tx),calc(var(--ty) - 10px)) rotate(calc(var(--rot) * .3))}}