.d4pp-page{--d4gl-tone-rare: oklch(0.83 0.13 92);--d4gl-tone-legendary: oklch(0.75 0.15 58);--d4gl-tone-max: oklch(0.7 0.17 25)}.d4gl{display:grid;gap:14px;margin-block:0 14px;container-type:inline-size}.d4gl-glyph[data-rune="1"],.d4gl-socket[data-n="1"]{--rare: var(--d4gl-rare-1);--legendary: var(--d4gl-legendary-1)}.d4gl-glyph[data-rune="2"],.d4gl-socket[data-n="2"]{--rare: var(--d4gl-rare-2);--legendary: var(--d4gl-legendary-2)}.d4gl-glyph[data-rune="3"],.d4gl-socket[data-n="3"]{--rare: var(--d4gl-rare-3);--legendary: var(--d4gl-legendary-3)}.d4gl-glyph[data-rune="4"],.d4gl-socket[data-n="4"]{--rare: var(--d4gl-rare-4);--legendary: var(--d4gl-legendary-4)}.d4gl-glyph[data-rune="5"],.d4gl-socket[data-n="5"]{--rare: var(--d4gl-rare-5);--legendary: var(--d4gl-legendary-5)}.d4gl-icon{background:var(--rare) center / contain no-repeat}.d4gl-glyph[data-rarity=legendary] .d4gl-icon,.d4gl-sockets[data-rarity=legendary] .d4gl-icon{background-image:var(--legendary)}.d4gl-glyph{--size: 52px;position:relative;display:grid;place-items:center;inline-size:var(--size);block-size:var(--size);flex:none}.d4gl-glyph--big{--size: 68px}.d4gl-glyph .d4gl-icon{grid-area:1 / 1;inline-size:58%;block-size:58%;border-radius:50%;filter:drop-shadow(0 0 6px color-mix(in oklch,var(--tone) 45%,transparent)) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-glyph[data-rarity=none] .d4gl-icon{filter:grayscale(0.7) brightness(0.7) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-glyph b{grid-area:1 / 1;align-self:end;position:relative;z-index:1;min-inline-size:22px;margin-block-end:2px;padding-block:2px;padding-inline:4px;border:1px solid color-mix(in oklch,var(--tone) 60%,transparent);border-radius:4px;background:oklch(0.14 0.015 270);color:oklch(0.98 0.01 90);font-size:11px;font-weight:700;line-height:1;text-align:center;font-variant-numeric:tabular-nums}.d4gl-glyph b:empty{display:none}.d4gl-glyph--big b{font-size:12px}.d4gl-ring{grid-area:1 / 1;inline-size:78%;block-size:78%;border:1.5px solid color-mix(in oklch,var(--d4lp-ink) 12%,transparent);border-radius:50%}.d4gl-ring--5{inline-size:98%;block-size:98%}.d4gl-glyph[data-radius="4"] .d4gl-ring--4,.d4gl-glyph[data-radius="5"] .d4gl-ring{border-color:color-mix(in oklch,var(--tone) 85%,transparent);box-shadow:0 0 6px -1px color-mix(in oklch,var(--tone) 70%,transparent),inset 0 0 4px -1px color-mix(in oklch,var(--tone) 60%,transparent)}.d4gl-count__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px}.d4gl-count__n{color:var(--d4lp-ink);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}.d4gl-sockets{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding-block:6px;border-radius:var(--d4lp-r-control);background:var(--d4lp-control)}.d4gl-sockets::before,.d4gl-sockets::after{content:"";position:absolute;inset-block-start:31px;inset-inline-start:10%;block-size:2px;pointer-events:none}.d4gl-sockets::before{inline-size:80%;background:color-mix(in oklch,var(--d4lp-ink) 9%,transparent)}.d4gl-sockets{--tone: var(--d4gl-tone-rare)}.d4gl-sockets[data-rarity=legendary]{--tone: var(--d4gl-tone-legendary)}.d4gl-sockets::after{inline-size:calc((var(--n) - 1) * 20%);background:var(--tone);box-shadow:0 0 8px color-mix(in oklch,var(--tone) 70%,transparent)}.d4gl-socket{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;min-inline-size:0;margin:0;padding:0;border:0;background:none;color:var(--d4lp-muted);font:inherit;cursor:pointer}.d4gl-socket .d4gl-icon{inline-size:44px;block-size:44px;border-radius:50%;filter:grayscale(0.85) brightness(0.55) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-socket.is-on .d4gl-icon{filter:drop-shadow(0 0 8px color-mix(in oklch,var(--tone) 55%,transparent)) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-socket b{font-size:12px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.d4gl-socket.is-on b{color:var(--d4lp-ink)}.d4gl-socket:focus-visible{outline:2px solid var(--d4lp-focus);outline-offset:2px;border-radius:var(--d4lp-r-control)}@media(hover:hover)and (pointer:fine){.d4gl-socket:not(.is-on):hover .d4gl-icon{filter:grayscale(0.3) brightness(0.85) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-socket:not(.is-on):hover b{color:var(--d4lp-copy)}}.d4gl-socket:active .d4gl-icon{scale:.96}.d4gl-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}@container (max-width: 470px){.d4gl-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.d4gl-card[data-d4gl=custom]{grid-column:span 2;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr auto;align-items:center;column-gap:10px}.d4gl-card[data-d4gl=custom] .d4gl-range{grid-row:2}.d4gl-card[data-d4gl=custom] .d4gl-sub{grid-row:3}.d4gl-card[data-d4gl=custom] .d4gl-glyph{grid-row:1 / 6;margin-block:0}.d4gl-card[data-d4gl=custom] .d4gl-price{grid-row:4;margin-block-start:2px}.d4gl-card[data-d4gl=custom] .d4gl-bar{grid-row:6;grid-column:1 / -1}}.d4gl-card{--tone: var(--d4lp-tint);display:grid;grid-template-rows:auto auto auto auto 1fr;justify-items:start;gap:2px;min-inline-size:0;margin:0;padding-block:8px 0;padding-inline:10px;overflow:clip;border:1px solid transparent;border-radius:var(--d4lp-r-control);color:var(--d4lp-copy);font:inherit;text-align:start;cursor:pointer;background:radial-gradient(70px 56px at 30px 30px,color-mix(in oklch,var(--tone) 12%,transparent),transparent),var(--d4lp-control)}.d4gl-card[data-tone=rare],.d4gl-read[data-tone=rare]{--tone: var(--d4gl-tone-rare)}.d4gl-card[data-tone=legendary],.d4gl-read[data-tone=legendary]{--tone: var(--d4gl-tone-legendary)}.d4gl-card[data-tone=max],.d4gl-read[data-tone=max]{--tone: var(--d4gl-tone-max)}.d4gl-card[aria-checked=true]{border-color:color-mix(in oklch,var(--tone) 70%,transparent);background:radial-gradient(90px 70px at 30px 30px,color-mix(in oklch,var(--tone) 22%,transparent),transparent),color-mix(in oklab,var(--tone) 12%,var(--d4lp-control));box-shadow:inset 0 0 18px color-mix(in oklch,var(--tone) 14%,transparent),0 4px 14px -6px color-mix(in oklch,var(--tone) 70%,transparent)}@media(hover:hover)and (pointer:fine){.d4gl-card[aria-checked=false]:hover{border-color:color-mix(in oklch,var(--tone) 30%,transparent)}.d4gl-card[aria-checked=false]:hover .d4gl-icon{filter:brightness(1.15) drop-shadow(0 0 8px color-mix(in oklch,var(--tone) 60%,transparent))}}.d4gl-card:active:not([aria-checked=true]){background-color:color-mix(in oklab,var(--d4lp-active) 60%,var(--d4lp-control))}.d4gl-card:focus-visible{outline:2px solid var(--d4lp-focus);outline-offset:2px}.d4gl-card .d4gl-glyph{margin-block:0 2px;margin-inline:-6px 0}.d4gl-card[aria-checked=false] .d4gl-icon{filter:brightness(0.85) drop-shadow(0 2px 4px oklch(0 0 none / 0.5))}.d4gl-range{color:var(--tone);font-size:14px;font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.d4gl-card[data-tone=custom] .d4gl-range{color:var(--d4lp-ink)}.d4gl-sub{color:var(--d4lp-copy);font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%}.d4gl-price{min-block-size:18px;margin-block-start:6px;color:var(--d4lp-ink);font-size:14px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}.d4gl-bar{position:relative;align-self:end;justify-self:stretch;block-size:3px;margin-block-start:10px;margin-inline:-10px;background:color-mix(in oklch,var(--d4lp-ink) 7%,transparent)}.d4gl-bar i{position:absolute;inset-block:0;inset-inline:var(--a, 0%) var(--b, 100%);background:color-mix(in oklch,var(--tone) 55%,transparent)}.d4gl-card[aria-checked=true] .d4gl-bar i{background:var(--tone)}.d4gl-bar[data-empty] i{display:none}.d4gl-read{--tone: var(--d4lp-tint);display:flex;align-items:center;gap:12px;margin-block:10px 6px;padding:6px 12px 6px 6px;border-radius:var(--d4lp-r-control);background:radial-gradient(80px 60px at 40px 50%,color-mix(in oklch,var(--tone) 16%,transparent),transparent),color-mix(in oklab,var(--d4lp-control) 70%,transparent)}.d4gl-read p{margin:0}.d4gl-read__name{color:var(--tone);font-size:16px;font-weight:700;line-height:1.3}.d4gl-read__note{color:var(--d4lp-copy);font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:no-preference){.d4gl-ring{transition:border-color .25s var(--d4lp-ease),box-shadow .25s var(--d4lp-ease)}.d4gl-sockets::after{transition:inline-size .25s var(--d4lp-ease)}.d4gl-socket:active .d4gl-icon{transition:scale .1s var(--d4lp-ease)}.d4gl-socket[data-lit] .d4gl-icon{animation:d4gl-allocate .5s var(--d4lp-ease) calc(var(--i, 0) * 70ms) backwards}.d4gl-card[data-lit] .d4gl-icon{animation:d4gl-allocate .5s var(--d4lp-ease)}@keyframes d4gl-allocate{from{scale:.8;filter:brightness(1.8) drop-shadow(0 0 0 transparent)}40%{filter:brightness(1.4) drop-shadow(0 0 12px color-mix(in oklch,var(--tone) 90%,transparent))}}.d4gl-glyph[data-grow=up] .d4gl-ring{animation:d4gl-grow .55s var(--d4lp-ease)}.d4gl-glyph[data-grow=up] .d4gl-ring--5{animation-delay:60ms;animation-fill-mode:backwards}.d4gl-glyph[data-grow=up][data-rarity=legendary] .d4gl-icon{animation:d4gl-flare .6s var(--d4lp-ease)}@keyframes d4gl-grow{from{scale:.55;opacity:0}}@keyframes d4gl-flare{from{scale:.85}35%{filter:brightness(1.7) drop-shadow(0 0 14px color-mix(in oklch,var(--tone) 90%,transparent))}}}.d4pp-on .custom-option[data-d4pp-native=glyph-level]{display:block!important}.d4gl-curve{position:relative;block-size:52px;margin-block:2px 0}.d4gl-curve svg{position:absolute;inset-block:8px 0;inset-inline:0;inline-size:100%;block-size:calc(100% - 8px);overflow:visible}.d4gl-zone--rare{--tone: var(--d4gl-tone-rare)}.d4gl-zone--legendary{--tone: var(--d4gl-tone-legendary)}.d4gl-zone--max{--tone: var(--d4gl-tone-max)}.d4gl-zone{fill:var(--tone);fill-opacity:.1}.d4gl-edge{fill:none;stroke:var(--tone);stroke-opacity:.4;stroke-width:1.5;vector-effect:non-scaling-stroke}.d4gl-curve__lit{clip-path:inset(0 var(--to, 100%) 0 var(--from, 0%));mask-image:linear-gradient(to bottom,black 30%,color-mix(in oklch,black 35%,transparent))}.d4gl-curve__lit .d4gl-zone{fill-opacity:.55}.d4gl-curve__lit .d4gl-edge{stroke-opacity:1;stroke-width:2}.d4gl-mark{position:absolute;inset-block:0 -14px;inset-inline-start:var(--x);padding-inline-start:5px;border-inline-start:1px dashed color-mix(in oklch,var(--d4lp-ink) 28%,transparent);color:var(--d4lp-muted);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none}@media(prefers-reduced-motion:no-preference){.d4gl-curve__lit{transition:clip-path .25s var(--d4lp-ease)}}.d4gl-add{flex:0 0 100%;box-sizing:border-box;inline-size:100%;margin-block:14px 4px}.d4gl-slider{--d4gl-scale: linear-gradient(90deg, var(--d4gl-tone-rare) 0 33.56%, var(--d4gl-tone-legendary) 33.56% 66.44%, var(--d4gl-tone-max) 66.44% 100%)}.d4pp-page .d4gl-slider .vue-slider{block-size:8px!important;padding-block:12px!important}.d4pp-page .d4gl-slider .vue-slider-rail{border-radius:4px;background:oklch(0.17 0.02 270);box-shadow:inset 0 1px 2px oklch(0 0 none / 0.7),0 1px 0 color-mix(in oklch,var(--d4lp-ink) 7%,transparent)}.d4pp-page .d4gl-slider .vue-slider-rail::before,.d4pp-page .d4gl-slider .vue-slider-rail::after{content:"";position:absolute;inset:1px 0;border-radius:inherit;background:var(--d4gl-scale);pointer-events:none}.d4pp-page .d4gl-slider .vue-slider-rail::before{opacity:.22}.d4pp-page .d4gl-slider .vue-slider-rail::after{inset-block:0;background:linear-gradient(to bottom,oklch(1 0 none / 0.35),transparent 60%),var(--d4gl-scale);clip-path:inset(0 var(--to, 100%) 0 var(--from, 0%) round 4px)}.d4pp-page .d4gl-slider .vue-slider-process{background:none!important}@media(prefers-reduced-motion:no-preference){.d4pp-page .d4gl-slider .vue-slider-rail::after{transition:clip-path .15s var(--d4lp-ease)}}.d4pp-page .d4gl-slider .vue-slider-mark-step{position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:8px;block-size:8px;border:1px solid color-mix(in oklch,var(--d4lp-ink) 35%,transparent);border-radius:1px;background:oklch(0.2 0.02 270);translate:-50% -50%;rotate:45deg;box-shadow:none}.d4pp-page .d4gl-slider .vue-slider-mark-step-active{border-color:oklch(0.9 0.08 85);background:oklch(0.82 0.12 85);box-shadow:0 0 6px oklch(0.8 0.13 80 / 0.7)}.d4pp-page .d4gl-slider .vue-slider-mark-label{margin-block-start:14px;color:var(--d4lp-muted);font-size:12px;font-variant-numeric:tabular-nums}.d4pp-page .d4gl-slider .vue-slider-mark-label-active{color:var(--d4lp-ink)}.d4pp-page .d4gl-slider .vue-slider-dot-handle{position:absolute;inset:-9px;inline-size:auto;block-size:auto;border:0;border-radius:50%;background:var(--d4gl-rare-1) center / contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 3px oklch(0 0 none / 0.7));cursor:grab}.d4pp-page .d4gl-slider .vue-slider-dot[data-rarity=legendary] .vue-slider-dot-handle{background-image:var(--d4gl-legendary-1)}.d4pp-page .d4gl-slider .vue-slider-dot-dragging .vue-slider-dot-handle{cursor:grabbing;filter:brightness(1.2) drop-shadow(0 0 8px oklch(0.8 0.13 80 / 0.7))}@media(hover:hover)and (pointer:fine){.d4pp-page .d4gl-slider .vue-slider-dot:hover .vue-slider-dot-handle{filter:brightness(1.25) drop-shadow(0 2px 3px oklch(0 0 none / 0.7))}}.d4pp-page .d4gl-slider .vue-slider-dot:focus-visible{outline:2px solid var(--d4lp-focus);outline-offset:8px;border-radius:4px}@media(prefers-reduced-motion:no-preference){.d4pp-page .d4gl-slider .vue-slider-dot-handle{transition:filter .15s var(--d4lp-ease),scale .15s var(--d4lp-ease)}.d4pp-page .d4gl-slider .vue-slider-dot-dragging .vue-slider-dot-handle{scale:1.12}}.d4pp-page .d4gl-slider .vue-slider-dot-tooltip-inner{padding-block:3px;padding-inline:8px;border:1px solid color-mix(in oklch,var(--d4lp-tint) 40%,transparent);border-radius:6px;background:oklch(0.15 0.02 270);color:var(--d4lp-ink);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 4px 10px oklch(0 0 none / 0.5);transform:none}.d4pp-page .d4gl-slider .vue-slider-dot-tooltip-inner::after{display:none}.d4pp-page .d4gl-slider .vue-slider-dot-tooltip-text{inline-size:auto;block-size:auto;transform:none;color:inherit;font-size:inherit}.d4pp-page .d4gl-slider .vue-slider-dot-handle::after{display:none}.d4pp-page .d4gl-slider .range-slider__inputs{gap:6px;align-items:center;padding:4px;border-radius:var(--d4lp-r-control);background:var(--d4lp-control);color:var(--d4lp-muted)}.d4pp-page .d4gl-slider .range-slider__input{inline-size:56px;block-size:32px;border-radius:calc(var(--d4lp-r-control) - 2px);background:color-mix(in oklab,var(--d4lp-panel) 60%,var(--d4lp-control));color:var(--d4lp-ink);font-weight:700;font-variant-numeric:tabular-nums}.d4pp-page .d4gl-slider .range-slider__input:focus-visible{outline:2px solid var(--d4lp-focus);outline-offset:1px}