@layer djb.reset,djb.base,djb.theme,djb.elements,djb.classes,djb.global,djb.nodes,djb.custom;@layer djb.base{.djb-button:where(:not(.djb-button--plain)){display:inline-flex;align-items:center;justify-content:center;gap:.5em;cursor:pointer;text-decoration:none;border:0;font:inherit;line-height:1.2}.djb-button--sm{padding:.5em 1em;font-size:.875em}.djb-button--md{padding:.75em 1.5em}.djb-button--lg{padding:1em 2em;font-size:1.125em}
.djb-button__icon{flex-shrink:0;width:1em;height:1em}.djb-svg{max-width:100%}
.djb-svg:where(svg):not([height]),.djb-svg__svg:not([height]){height:auto}
.djb-svg--link{display:inline-block;line-height:0;color:inherit}
.djb-svg--link:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.djb-svg--empty{display:inline-flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:8px;background:repeating-linear-gradient(45deg,#f3f1f7,#f3f1f7 10px,#eeebf4 10px,#eeebf4 20px);color:#9a93ad}}@layer djb.global{/* ==========================================================================
   PAGE: proizvodi  →  Bricks Page settings → Custom CSS
   ========================================================================== */
/* @page:start proizvodi */
/* ==========================================================================
   PROIZVODI — overview of all products — prefix .prs-
   Product UI illustrations — prefix .pmk- (same block as templates/proizvod.css)
   ========================================================================== */
.prs-dot { color: var(--color-primary); }

/* --- Hero: one line with a serif accent, then "Djia" + a pill with the rotating product name --- */
.prs-hero { position: relative; overflow: hidden; padding: max(124px, calc(42px + 2.708vw + clamp(50px, 9vw, 150px))) 0 clamp(50px, 6vw, 100px); background: radial-gradient(at 100% 0%, var(--color-white) 60%, var(--color-primary-hover) 112%, var(--color-primary-dark) 150%); }
.prs-hero__title { font-size: max(50px, min(9.766vw - 6.25px, 9.375vw)); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
@media (min-width: 1441px) { .prs-hero__title { font-size: min(9.375vw, calc((min(100vw, 1780px) - min(11.1vw, 180px)) / 9.6)); } }
.prs-hero__serif { font-size: .9em; font-weight: 400; letter-spacing: -.01em; }
.prs-hero__line { padding: .05em .02em .08em; margin: -.03em 0; }
.prs-hero__pill { display: inline-flex; align-items: center; gap: .22em; max-width: 100%; padding: .02em .3em .06em .36em; border: max(2px, .028em) solid var(--color-primary); border-radius: var(--radius-pill); color: var(--color-primary-line); font-size: .82em; line-height: 1.05; vertical-align: middle; }
.prs-hero__djia { color: var(--color-dark); }
.prs-hero__rot { flex: none; height: 1.1em; white-space: nowrap; transition: width .6s var(--ease-out); }
.prs-hero__word { justify-self: start; }
.prs-hero__slash { display: inline-block; flex: none; width: .15em; height: .6em; border-radius: .03em; background: currentColor; transform: skewX(-22deg); animation: prsSlash 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes prsSlash { 0%, 70% { transform: skewX(-22deg) rotate(0deg); } 85% { transform: skewX(-22deg) rotate(180deg) scale(.8); } 100% { transform: skewX(-22deg) rotate(180deg); } }
.prs-hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: clamp(28px, 4vw, 56px); }
.prs-hero__lede { max-width: 30em; margin: 0; font-size: clamp(18px, 16.875px + .1953vw, 20px); line-height: 1.5; letter-spacing: -.02em; }
.prs-hero__names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.prs-hero__name { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: rgba(255,255,255,.7); font-size: 15px; font-weight: 500; transition: border-color .3s, background-color .3s; }
.prs-hero__name:hover { border-color: var(--color-primary); background: var(--color-white); }
.prs-hero__name-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }

/* --- Products: big cards that stick and stack; the one underneath sinks back a little --- */
.prs-list__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); gap: 24px clamp(30px, 5vw, 100px); align-items: end; margin-bottom: clamp(32px, 4vw, 70px); }
.prs-list__title { max-width: 15ch; margin: 14px 0 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prs-list__lead { max-width: 40ch; margin: 0; color: var(--color-text-secondary); font-size: var(--fs-big); line-height: 1.5; }
.prs-stack { display: grid; gap: clamp(24px, 8vh, 90px); }
.prs-item { position: sticky; top: 20px; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(24px, 3vw, 60px); min-height: min(calc(100svh - 88px), 900px); padding: clamp(24px, 2.8vw, 54px); border-radius: var(--radius-xl); background: var(--color-gray); color: var(--color-dark); transform: scale(calc(1 - var(--prs-p, 0) * .05)); transform-origin: 50% 0; will-change: transform; }
.prs-item::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--color-dark); opacity: calc(var(--prs-p, 0) * .28); pointer-events: none; }
.prs-item:nth-child(2) { top: 36px; }
.prs-item:nth-child(3) { top: 52px; }
.prs-item:nth-child(4) { top: 68px; }
.prs-item--dark { background: var(--color-dark); color: var(--color-white); }
.prs-item--green { background: var(--color-primary); }
.prs-item--mist { background: var(--color-primary-mist); }
.prs-item__info { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 28px); min-width: 0; }
.prs-item__meta { display: flex; justify-content: space-between; gap: 16px; font-size: clamp(14px, 13px + .2vw, 17px); }
.prs-item__num { font-weight: 600; letter-spacing: .04em; }
.prs-item__kind { color: var(--color-text-muted); }
.prs-item--dark .prs-item__kind { color: var(--color-text-on-dark-muted); }
.prs-item--green .prs-item__kind { color: rgba(10,33,41,.7); }
.prs-item__name { margin: auto 0 0; font-size: clamp(44px, 1.5rem + 4.4vw, 124px); font-weight: 600; line-height: .95; letter-spacing: -.045em; }
.prs-item__name a { color: inherit; }
.prs-item--green .prs-dot { color: var(--color-dark); }
.prs-item__pitch { max-width: 36ch; margin: 0; font-size: clamp(17px, 15px + .3vw, 21px); line-height: 1.5; letter-spacing: -.015em; opacity: .85; }
.prs-item__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--color-border); }
.prs-item--dark .prs-item__facts { border-color: var(--color-border-dark); }
.prs-item__fact { display: grid; gap: 6px; padding: 14px 12px 0 0; }
.prs-item__fact + .prs-item__fact { padding-left: 12px; border-left: 1px solid var(--color-border); }
.prs-item--dark .prs-item__fact + .prs-item__fact { border-color: var(--color-border-dark); }
.prs-item__value { font-size: clamp(26px, 1rem + 1.5vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.prs-item__label { color: var(--color-text-muted); font-size: clamp(13px, 12.4px + .15vw, 16px); line-height: 1.3; }
.prs-item--dark .prs-item__label { color: var(--color-text-on-dark-muted); }
.prs-item--green .prs-item__label { color: rgba(10,33,41,.72); }
.prs-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.prs-item__tag { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid currentColor; border-radius: var(--radius-pill); opacity: .75; font-size: 14px; font-weight: 500; line-height: 1; }
.prs-item__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.prs-item__visual { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 320px; padding: clamp(18px, 2.4vw, 46px); border-radius: var(--radius-lg); background: radial-gradient(ellipse 70% 60% at 85% 110%, rgba(3,226,156,.45), transparent 70%), var(--color-dark); container-type: inline-size; }
.prs-item--dark .prs-item__visual { background: radial-gradient(ellipse 70% 60% at 85% 110%, rgba(3,226,156,.35), transparent 70%), var(--color-dark-deep); box-shadow: inset 0 0 0 1px var(--color-border-dark); }
.prs-item__visual::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, black 15%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 45%, black 15%, transparent 72%); }
.prs-item__mock { width: 100%; font-size: clamp(8.5px, 2.05cqi, 16px); }
@media (max-height: 760px) and (min-width: 901px) { .prs-item__tags { display: none; } }

/* --- Compare: one table, cards on phones --- */
.prs-cmp__head { margin-bottom: clamp(28px, 3.4vw, 60px); }
.prs-cmp__title { max-width: 16ch; margin: 14px 0 0; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.03em; }
.prs-cmp__table { width: 100%; border-collapse: collapse; font-size: clamp(15px, 13.9px + .25vw, 19px); line-height: 1.4; }
.prs-cmp__th { padding: 0 20px 16px 0; color: var(--color-text-muted); font-size: clamp(13px, 12.4px + .15vw, 16px); font-weight: 400; text-align: left; letter-spacing: .02em; }
.prs-cmp__row { border-top: 1px solid var(--color-border); transition: background-color .3s; }
.prs-cmp__row:last-child { border-bottom: 1px solid var(--color-border); }
.prs-cmp__row:hover { background: var(--color-gray); }
.prs-cmp__cell { padding: clamp(18px, 1.6vw, 28px) 20px clamp(18px, 1.6vw, 28px) 0; vertical-align: top; }
.prs-cmp__cell:first-child { padding-left: 12px; }
.prs-cmp__name { display: inline-block; color: inherit; font-size: clamp(20px, 1rem + .8vw, 30px); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.prs-cmp__name:hover { color: var(--color-primary-ink); }
.prs-cmp__price { font-weight: 600; white-space: nowrap; }
.prs-cmp__note { margin: 18px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; }

/* --- Tablet / phone --- */
@media (max-width: 1100px) {
  .prs-item { grid-template-columns: 1fr; min-height: 0; }
  .prs-item__visual { min-height: 0; }
}
@media (max-width: 900px) {
  .prs-list__head { grid-template-columns: 1fr; }
  .prs-item, .prs-item:nth-child(n) { position: relative; top: auto; transform: none; }
  .prs-item::after { display: none; }
  .prs-stack { gap: 14px; }
  .prs-cmp__table, .prs-cmp__table tbody, .prs-cmp__row, .prs-cmp__cell { display: block; width: 100%; }
  .prs-cmp__table thead { display: none; }
  .prs-cmp__row { padding: 16px 0; }
  .prs-cmp__cell { padding: 6px 0; }
  .prs-cmp__cell:first-child { padding: 0 0 6px; }
  .prs-cmp__cell[data-label]::before { content: attr(data-label); display: block; color: var(--color-text-muted); font-size: 13px; }
}
@media (max-width: 600px) {
  .prs-hero__title { font-size: 55px; }
  .prs-hero__pill { font-size: .7em; }
  .prs-item { padding: 22px; border-radius: 20px; }
  .prs-item__name { font-size: 44px; }
  .prs-item__fact { padding-right: 8px; }
  .prs-item__fact + .prs-item__fact { padding-left: 8px; }
  .prs-item__value { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .prs-hero__slash { animation: none; } .prs-item { transform: none; } .prs-item::after { display: none; } }

/* @pmk:start — product UI illustrations (identical copy in proizvodi.css) */
.pmk { position: relative; color: var(--color-white); font-size: inherit; line-height: 1.3; text-align: left; }
.pmk-win { overflow: hidden; border: 1px solid var(--color-border-dark); border-radius: 1.1em; background: var(--color-dark-surface); box-shadow: 0 3em 6em -3em rgba(0,0,0,.65); }
.pmk-win__bar { display: flex; align-items: center; gap: .5em; padding: .9em 1.1em; border-bottom: 1px solid var(--color-border-dark); }
.pmk-win__dot { flex: none; width: .65em; height: .65em; border-radius: 50%; background: var(--color-text-on-dark-faint); }
.pmk-win__dot:first-child { background: var(--color-primary); }
.pmk-win__url { flex: 1; min-width: 0; margin-left: .7em; padding: .45em 1em; overflow: hidden; border-radius: 99em; background: rgba(255,255,255,.06); color: var(--color-text-on-dark-muted); font-size: .92em; white-space: nowrap; text-overflow: ellipsis; }
.pmk-win__body { padding: 1.6em; }
.pmk-label { color: var(--color-text-on-dark-muted); font-size: .9em; letter-spacing: .02em; }
.pmk-badge { display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; border-radius: 99em; background: rgba(3,226,156,.14); color: var(--color-primary); font-size: .85em; font-weight: 600; letter-spacing: .04em; }
.pmk-badge__dot { width: .5em; height: .5em; border-radius: 50%; background: currentColor; animation: pmkBlink 1.6s ease-in-out infinite; animation-play-state: paused; }
.is-live .pmk-badge__dot { animation-play-state: running; }
@keyframes pmkBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pmk-d1 { --d: .25s; } .pmk-d2 { --d: .55s; } .pmk-d3 { --d: .85s; } .pmk-d4 { --d: 1.15s; } .pmk-d5 { --d: 1.45s; }

/* Cache: two TTFB bars + three score rings */
.pmk-cache__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: 1.6em; }
.pmk-cache__rows { display: grid; gap: 1.3em; }
.pmk-cache__row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 4.6em; gap: 1em; align-items: center; }
.pmk-cache__name { font-size: 1.05em; font-weight: 500; }
.pmk-cache__track { position: relative; height: 1.5em; border-radius: 99em; background: rgba(255,255,255,.06); }
.pmk-cache__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: rgba(255,255,255,.26); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .2s; }
.pmk-cache__bar--fast { width: 8.7%; min-width: 1.5em; background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-hover)); box-shadow: 0 0 1.4em rgba(3,226,156,.55); transition-delay: .9s; }
.is-live .pmk-cache__bar { transform: none; }
.pmk-cache__ms { font-size: 1.3em; font-weight: 500; text-align: right; letter-spacing: -.02em; white-space: nowrap; }
.pmk-cache__ms--fast { color: var(--color-primary); }
.pmk-cache__rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin-top: 2em; padding-top: 1.6em; border-top: 1px solid var(--color-border-dark); }
.pmk-ring { display: flex; align-items: center; gap: .9em; }
.pmk-ring__svg { flex: none; width: 4.2em; height: 4.2em; transform: rotate(-90deg); }
.pmk-ring__bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.pmk-ring__fg { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; transition: stroke-dashoffset 1.8s var(--ease-out) 1.1s; }
.is-live .pmk-ring__fg { stroke-dashoffset: 0; }
.pmk-ring__val { display: block; font-size: 1.5em; font-weight: 600; line-height: 1; }
.pmk-ring__name { display: block; margin-top: .3em; color: var(--color-text-on-dark-muted); font-size: .85em; }

/* Builder: structure tree, canvas with a moving selection, style tokens, release bar */
.pmk-build__grid { display: grid; grid-template-columns: 11em minmax(0, 1fr) 10em; min-height: 24em; }
.pmk-build__side { padding: 1.2em; border-right: 1px solid var(--color-border-dark); }
.pmk-build__side--r { border-right: 0; border-left: 1px solid var(--color-border-dark); }
.pmk-build__tree { display: grid; gap: .25em; margin-top: .9em; }
.pmk-build__node { display: flex; align-items: center; gap: .5em; padding: .45em .6em; border-radius: .5em; color: var(--color-text-on-dark-muted); font-size: .92em; white-space: nowrap; animation: pmkNode 6s infinite; animation-play-state: paused; }
.pmk-build__node::before { content: ""; flex: none; width: .55em; height: .55em; border: 1px solid currentColor; border-radius: .15em; }
.pmk-build__node--i1 { padding-left: 1.6em; }
.pmk-build__node--i2 { padding-left: 2.6em; }
.pmk-build__node--a { animation-delay: 0s; }
.pmk-build__node--b { animation-delay: 2s; }
.pmk-build__node--c { animation-delay: 4s; }
.pmk-build__node--still { animation: none; }
@keyframes pmkNode { 0%, 30% { background: rgba(3,226,156,.16); color: var(--color-white); } 34%, 100% { background: transparent; color: var(--color-text-on-dark-muted); } }
.pmk-build__canvas { position: relative; display: grid; align-content: start; gap: 1em; padding: 1.6em; background: rgba(255,255,255,.02); }
.pmk-build__block { position: relative; border-radius: .7em; background: rgba(255,255,255,.06); }
.pmk-build__block::after { content: ""; position: absolute; inset: -.35em; border: 1.5px solid var(--color-primary); border-radius: .9em; opacity: 0; animation: pmkSel 6s infinite; animation-play-state: paused; }
.pmk-build__block--a::after { animation-delay: 0s; }
.pmk-build__block--b::after { animation-delay: 2s; }
.pmk-build__block--c::after { animation-delay: 4s; }
@keyframes pmkSel { 0% { opacity: 0; transform: scale(1.04); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: none; } }
.is-live .pmk-build__node, .is-live .pmk-build__block::after { animation-play-state: running; }
.pmk-build__hero { display: grid; gap: .7em; padding: 1.6em; }
.pmk-build__line { display: block; height: .9em; border-radius: 99em; background: rgba(255,255,255,.22); }
.pmk-build__line--xl { width: 72%; height: 1.6em; background: rgba(255,255,255,.5); }
.pmk-build__line--m { width: 54%; }
.pmk-build__line--s { width: 36%; }
.pmk-build__btns { display: flex; gap: .6em; margin-top: .5em; }
.pmk-build__btn { width: 6.5em; height: 2.2em; border-radius: 99em; background: var(--color-primary); }
.pmk-build__btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.pmk-build__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; background: none; }
.pmk-build__card { height: 6.4em; border-radius: .7em; background: rgba(255,255,255,.06); }
.pmk-build__tokens { display: grid; gap: .8em; margin-top: .9em; }
.pmk-build__sw { display: flex; gap: .4em; }
.pmk-build__swatch { width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--color-primary); }
.pmk-build__swatch--2 { background: var(--color-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.pmk-build__swatch--3 { background: var(--color-gray); }
.pmk-build__swatch--4 { background: var(--color-primary-light); }
.pmk-build__tok { display: flex; justify-content: space-between; gap: .6em; padding-bottom: .55em; border-bottom: 1px solid var(--color-border-dark); color: var(--color-text-on-dark-muted); font-size: .88em; }
.pmk-build__tok b { color: var(--color-white); font-weight: 500; }
.pmk-build__foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .9em 1.2em; border-top: 1px solid var(--color-border-dark); }
.pmk-build__publish { padding: .55em 1.1em; border-radius: 99em; background: var(--color-primary); color: var(--color-dark); font-size: .92em; font-weight: 600; }

/* Bricks: 15 module tiles switch on one after another */
.pmk-bricks__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; margin-bottom: 1.4em; }
.pmk-bricks__count { font-size: 2.6em; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.pmk-bricks__count small { margin-left: .3em; color: var(--color-text-on-dark-muted); font-size: .36em; font-weight: 500; letter-spacing: 0; }
.pmk-bricks__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7em; }
.pmk-mod { display: flex; flex-direction: column; justify-content: space-between; gap: 1.2em; min-height: 5.6em; padding: .85em; border: 1px solid var(--color-border-dark); border-radius: .8em; background: rgba(255,255,255,.03); transition: border-color .5s, background-color .5s; transition-delay: calc(var(--i, 0) * 90ms + 200ms); }
.pmk-mod__name { font-size: .92em; font-weight: 500; line-height: 1.2; }
.pmk-mod__sw { position: relative; width: 2.3em; height: 1.3em; border-radius: 99em; background: rgba(255,255,255,.16); transition: background-color .4s; transition-delay: inherit; }
.pmk-mod__sw::after { content: ""; position: absolute; left: .18em; top: .18em; width: .94em; height: .94em; border-radius: 50%; background: var(--color-white); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: inherit; }
.is-live .pmk-mod { border-color: rgba(3,226,156,.45); background-color: rgba(3,226,156,.08); }
.is-live .pmk-mod__sw { background-color: var(--color-primary); }
.is-live .pmk-mod__sw::after { transform: translateX(1em); }
.is-live .pmk-mod--off { border-color: var(--color-border-dark); background-color: rgba(255,255,255,.03); }
.is-live .pmk-mod--off .pmk-mod__sw { background-color: rgba(255,255,255,.16); }
.is-live .pmk-mod--off .pmk-mod__sw::after { transform: none; }
.pmk-bricks__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6em 1em; margin-top: 1.3em; color: var(--color-text-on-dark-muted); font-size: .9em; }

/* Filter: facets get checked, chips appear in the URL and above the results */
.pmk-filter__grid { display: grid; grid-template-columns: 13em minmax(0, 1fr); min-height: 24em; }
.pmk-filter__side { display: grid; align-content: start; gap: 1.3em; padding: 1.3em; border-right: 1px solid var(--color-border-dark); }
.pmk-filter__facet { display: grid; gap: .55em; }
.pmk-filter__opt { display: flex; align-items: center; gap: .6em; font-size: .95em; }
.pmk-filter__box { position: relative; flex: none; width: 1.15em; height: 1.15em; border: 1.5px solid rgba(255,255,255,.4); border-radius: .3em; transition: background-color .3s, border-color .3s; transition-delay: var(--d, 0s); }
.pmk-filter__box::after { content: ""; position: absolute; left: .32em; top: .1em; width: .3em; height: .58em; border: solid var(--color-dark); border-width: 0 .14em .14em 0; transform: rotate(45deg) scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.is-live .pmk-filter__box--on { border-color: var(--color-primary); background-color: var(--color-primary); }
.is-live .pmk-filter__box--on::after { transform: rotate(45deg) scale(1); }
.pmk-filter__count { margin-left: auto; color: var(--color-text-on-dark-muted); font-size: .85em; }
.pmk-filter__range { position: relative; height: .35em; margin: .9em .5em .4em; border-radius: 99em; background: rgba(255,255,255,.14); }
.pmk-filter__fill { position: absolute; left: 30%; right: 40%; top: 0; bottom: 0; border-radius: inherit; background: var(--color-primary); transform: scaleX(.2); transition: transform 1s var(--ease-out) 1.2s; }
.is-live .pmk-filter__fill { transform: none; }
.pmk-filter__knob { position: absolute; top: 50%; width: 1.1em; height: 1.1em; margin: -.55em 0 0 -.55em; border-radius: 50%; background: var(--color-white); box-shadow: 0 0 0 .25em rgba(3,226,156,.3); transition: left 1s var(--ease-out) 1.2s; }
.pmk-filter__knob--a { left: 44%; }
.pmk-filter__knob--b { left: 52%; }
.is-live .pmk-filter__knob--a { left: 30%; }
.is-live .pmk-filter__knob--b { left: 60%; }
.pmk-filter__main { display: grid; align-content: start; gap: 1.1em; padding: 1.3em; }
.pmk-filter__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; min-height: 2.1em; }
.pmk-filter__chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 99em; background: rgba(3,226,156,.16); color: var(--color-primary); font-size: .9em; font-weight: 500; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.pmk-filter__chip::after { content: "×"; color: var(--color-text-on-dark-muted); }
.pmk-filter__chip--reset { background: none; color: var(--color-text-on-dark-muted); text-decoration: underline; }
.pmk-filter__chip--reset::after { content: none; }
.is-live .pmk-filter__chip { opacity: 1; transform: none; }
.pmk-filter__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.pmk-filter__item { display: grid; gap: .5em; padding: .6em; border-radius: .8em; background: rgba(255,255,255,.05); animation: pmkSwap 5s ease-in-out infinite; animation-play-state: paused; animation-delay: calc(var(--i, 0) * 120ms + 1.6s); }
.is-live .pmk-filter__item { animation-play-state: running; }
@keyframes pmkSwap { 0%, 78%, 100% { opacity: 1; transform: none; } 84% { opacity: .15; transform: translateY(.5em); } 90% { opacity: 1; transform: none; } }
.pmk-filter__img { aspect-ratio: 16 / 10; border-radius: .5em; background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(3,226,156,.18)); }
.pmk-filter__t { display: block; width: 70%; height: .7em; border-radius: 99em; background: rgba(255,255,255,.3); }
.pmk-filter__p { display: block; width: 36%; height: .7em; border-radius: 99em; background: var(--color-primary); opacity: .8; }

@media (max-width: 760px) {
  .pmk-build__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pmk-build__side { display: none; }
  .pmk-filter__grid { grid-template-columns: 10.5em minmax(0, 1fr); }
  .pmk-filter__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmk-filter__item:nth-child(n+5) { display: none; }
  .pmk-bricks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pmk-mod:nth-child(n+13) { display: none; }
  .pmk-cache__row { grid-template-columns: 6.8em minmax(0, 1fr) 4.2em; }
  .pmk-cache__rings { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .pmk-filter__grid { grid-template-columns: minmax(0, 1fr); }
  .pmk-filter__side { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--color-border-dark); }
  .pmk-filter__facet--range { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pmk *, .pmk *::before, .pmk *::after { animation: none !important; transition: none !important; }
}
/* @pmk:end */}@layer djb.nodes{.djb-fopktz{display:contents}.djb-aii8bz{display:contents}.djb-7933tz{display:contents}.djb-gxoecz{display:contents}}