/* Kromia content components. The reference theme defines the visual system. */
[hidden]{display:none!important}.desktop-nav body{--nav-shift:300px}.desktop-nav .sidenav{transform:translateX(0)}
.kromia-progress{position:fixed;inset:calc(var(--topbar-h) - 2px) 0 auto;height:2px;z-index:var(--z-nav);background:transparent;pointer-events:none}.kromia-progress>span{display:block;height:100%;width:0;background:var(--brass-400)}
.kromia-flag{width:22px;height:15px;border-radius:2px;background:linear-gradient(90deg,#002b7f 0 33.33%,#fcd116 33.33% 66.66%,#ce1126 66.66%);box-shadow:0 0 0 1px #c9a24a73}.kromia-flag.is-en{background:linear-gradient(0deg,transparent 40%,#c8102e 40% 60%,transparent 60%),linear-gradient(90deg,transparent 40%,#fff 40% 60%,transparent 60%),#012169}
.kromia-split{width:100%}.kromia-art{width:min(100%,420px);height:370px;display:grid;place-items:center;position:relative;isolation:isolate}.kromia-art::before{content:'';position:absolute;inset:10%;z-index:-1;background:var(--scene) center/cover,radial-gradient(ellipse,var(--wash),transparent);mask:var(--brush-disc) center/100% 100% no-repeat}.kromia-art img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 14px 22px #0006)}
.kromia-split .kit{width:min(100%,420px)}.kromia-split .blk-split__body{max-width:60ch}.kit__ring--gear .kit__orb::after{content:none}.kit__cap{max-width:100%}.kit__item[data-item]{position:relative}.kit__item:hover{filter:brightness(1.25)}
.kromia-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center;margin-top:30px!important}.kromia-stats strong{font:600 30px var(--font-display);color:var(--accent);display:block}.kromia-stats span{font-size:11px;display:block;margin-top:8px}
.kromia-class-tabs{justify-content:center;margin:0 auto 30px;max-width:600px;flex-wrap:wrap}.kromia-caption{text-align:center;font-size:var(--fs-sm);max-width:none;margin-top:30px}
.kromia-levels{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:46px auto 24px;max-width:850px}.kromia-level{min-width:82px;min-height:85px;display:grid;place-content:center;gap:4px;border:1px solid var(--ornament);background:var(--note-fill);color:var(--ink);border-radius:6px;cursor:pointer}.kromia-level span{font:12px var(--font-display)}.kromia-level strong{font:600 25px var(--font-display)}.kromia-level:hover,.kromia-level.is-selected{background:var(--crimson-500);color:var(--text-primary);border-color:var(--crimson-600)}.kromia-level.is-selected strong{color:inherit}.kromia-level-detail{text-align:center;max-width:none;font-size:var(--fs-sm)}
.kromia-reward{padding:26px;max-width:440px;text-align:center}.kromia-reward>.icon{width:65px;height:65px;margin:0 auto 22px;color:var(--ornament)}.kromia-reward p{font-size:var(--fs-sm)}
.kromia-faq{max-width:780px}.kromia-faq details{text-align:left;border-bottom:1px solid var(--rule);padding:20px 0}.kromia-faq summary{list-style:none;font-family:var(--font-display);color:var(--ink);cursor:pointer;padding-right:25px;position:relative}.kromia-faq summary:after{content:'+';position:absolute;right:0;color:var(--accent)}.kromia-faq details[open] summary:after{content:'−'}.kromia-faq details>p{font-size:var(--fs-sm);margin-top:18px!important}
.kromia-tooltip{position:fixed;z-index:2000;padding:14px 20px;max-width:290px;background:#0b0908ed;color:#f7d54c;font:13px/1.5 Tahoma,sans-serif;border:1px solid #c9a24a;box-shadow:0 0 0 3px #140c09cc,0 8px 20px #0009;border-radius:4px;pointer-events:none;text-align:center}
@media(min-width:1200px){.kromia-split{grid-template-columns:minmax(300px,.8fr) minmax(0,1fr);gap:45px;align-items:center}.kromia-split.blk-split--rev>figure{order:2}.kromia-split .blk-split__body{text-align:left}.kromia-split .blk-split__body>h3{margin-inline:0}.kromia-split .blk-split__body p{margin-inline:0}.kromia-art{height:420px}}
@media(max-width:767px){.kromia-art{height:300px}.kromia-stats{gap:8px}.kromia-stats strong{font-size:25px}.kromia-stats span{font-size:10px}.kromia-level{min-width:65px;min-height:75px}.kromia-levels{gap:8px}.kromia-reward{padding:12px}.countdown__num{font-size:var(--cd-num)}.hero__logo{width:min(82vw,520px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}