KONTENEROLOGIA.COMMateriał ekspercki
:root{
--ktlg-bg:#0B1220;
--ktlg-bg-deep:#08101C;
--ktlg-surface:#111A2B;
--ktlg-surface-2:#162238;
--ktlg-surface-3:#0D1726;
--ktlg-border:#23314A;
--ktlg-border-strong:#355078;
--ktlg-primary:#2B5DA8;
--ktlg-primary-light:#4C7FD4;
--ktlg-cyan:#75B5D9;
--ktlg-text:#D7E0EE;
--ktlg-text-soft:#A7B4C9;
--ktlg-muted:#71829D;
--ktlg-white:#FFFFFF;
--ktlg-amber:#D7A34A;
--ktlg-rust:#C86242;
--ktlg-green:#65B58A;
--ktlg-serif:"Playfair Display",Georgia,"Times New Roman",serif;
--ktlg-sans:"Geist","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ktlg-bg)}
body{
margin:0;
min-width:320px;
overflow-x:hidden;
color:var(--ktlg-text);
background:
radial-gradient(circle at 82% 3%,rgba(76,127,212,.16),transparent 31rem),
radial-gradient(circle at 12% 35%,rgba(43,93,168,.08),transparent 28rem),
linear-gradient(180deg,var(--ktlg-bg),var(--ktlg-bg-deep));
font:400 17px/1.78 var(--ktlg-sans);
}
button,a{font:inherit}
button{color:inherit}
a{color:var(--ktlg-cyan);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ktlg-white)}
img,svg{display:block;max-width:100%}
p,h1,h2,h3,h4,blockquote{margin-top:0}
.ktlg-shell{width:min(1140px,calc(100% - 36px));margin-inline:auto}
.ktlg-reader-header{
position:sticky;
top:0;
z-index:50;
border-bottom:1px solid rgba(53,80,120,.45);
background:rgba(11,18,32,.88);
backdrop-filter:blur(18px);
}
.ktlg-reader-header__inner{
height:76px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.ktlg-brand{
color:var(--ktlg-white);
text-decoration:none;
font:700 clamp(1.45rem,3vw,1.9rem)/1 var(--ktlg-serif);
letter-spacing:-.035em;
}
.ktlg-brand em{font-style:normal;color:var(--ktlg-primary-light)}
.ktlg-series-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border:1px solid var(--ktlg-border);
border-radius:999px;
background:rgba(17,26,43,.74);
color:var(--ktlg-text-soft);
font-size:.73rem;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
white-space:nowrap;
}
.ktlg-series-pill::before{
content:"";
width:7px;height:7px;border-radius:50%;
background:var(--ktlg-primary-light);
box-shadow:0 0 0 5px rgba(76,127,212,.13);
}
.ktlg-hero{
padding:clamp(62px,9vw,112px) 0 54px;
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr);
gap:clamp(34px,6vw,78px);
align-items:end;
}
.ktlg-eyebrow,.ktlg-label{
color:var(--ktlg-primary-light);
font-size:.75rem;
font-weight:850;
letter-spacing:.18em;
text-transform:uppercase;
}
.ktlg-hero h1{
max-width:900px;
margin:15px 0 25px;
color:var(--ktlg-white);
font:700 clamp(3rem,7.4vw,6.6rem)/.94 var(--ktlg-serif);
letter-spacing:-.055em;
text-wrap:balance;
}
.ktlg-lead{
max-width:780px;
margin:0;
color:var(--ktlg-text-soft);
font-size:clamp(1.08rem,2vw,1.3rem);
line-height:1.72;
}
.ktlg-hero-question{
padding:24px 23px 24px 27px;
border-left:3px solid var(--ktlg-primary-light);
border-radius:0 14px 14px 0;
background:linear-gradient(90deg,rgba(76,127,212,.11),transparent);
color:var(--ktlg-text-soft);
}
.ktlg-hero-question strong{
display:block;
margin-bottom:8px;
color:var(--ktlg-white);
font-size:.76rem;
letter-spacing:.11em;
text-transform:uppercase;
}
.ktlg-meta{
display:flex;
flex-wrap:wrap;
gap:9px 18px;
padding:0 0 42px;
border-bottom:1px solid var(--ktlg-border);
color:var(--ktlg-muted);
font-size:.82rem;
}
.ktlg-meta span{display:inline-flex;align-items:center;gap:7px}
.ktlg-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ktlg-primary-light)}
.ktlg-section{padding:clamp(58px,8vw,94px) 0}
.ktlg-section-head{max-width:850px;margin-bottom:36px}
.ktlg-section h2{
margin:12px 0 17px;
color:var(--ktlg-white);
font:700 clamp(2.2rem,5vw,4.45rem)/1.03 var(--ktlg-serif);
letter-spacing:-.042em;
text-wrap:balance;
}
.ktlg-section-intro{max-width:800px;color:var(--ktlg-text-soft);font-size:1.08rem}
.ktlg-article-copy{max-width:850px}
.ktlg-article-copy p{margin-bottom:1.25em;color:var(--ktlg-text-soft)}
.ktlg-article-copy strong{color:var(--ktlg-white)}
.ktlg-xray{
overflow:hidden;
border:1px solid var(--ktlg-border-strong);
border-radius:22px;
background:
linear-gradient(rgba(76,127,212,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(76,127,212,.05) 1px,transparent 1px),
linear-gradient(180deg,var(--ktlg-surface),var(--ktlg-surface-3));
background-size:32px 32px,32px 32px,auto;
box-shadow:0 30px 90px rgba(2,8,18,.32);
}
.ktlg-xray__bar{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:17px 21px;
border-bottom:1px solid var(--ktlg-border);
background:rgba(13,23,38,.76);
color:var(--ktlg-muted);
font-size:.8rem;
}
.ktlg-xray__bar strong{color:var(--ktlg-white)}
.ktlg-view-tabs{display:flex;gap:8px}
.ktlg-view-tab{
padding:7px 11px;
border:1px solid var(--ktlg-border);
border-radius:8px;
background:var(--ktlg-surface);
color:var(--ktlg-text-soft);
font-size:.74rem;
font-weight:800;
cursor:pointer;
}
.ktlg-view-tab[aria-selected="true"]{
border-color:var(--ktlg-primary-light);
background:rgba(43,93,168,.25);
color:var(--ktlg-white);
}
.ktlg-stage{
position:relative;
aspect-ratio:1200/560;
min-height:410px;
padding:24px;
}
.ktlg-view{position:absolute;inset:24px;display:none}
.ktlg-view.is-active{display:block}
.ktlg-view svg{width:100%;height:100%;filter:drop-shadow(0 24px 45px rgba(0,0,0,.27))}
.ktlg-pin{
position:absolute;
z-index:4;
width:40px;height:40px;
padding:0;
display:grid;
place-items:center;
border:1px solid rgba(117,181,217,.95);
border-radius:50%;
background:rgba(13,23,38,.95);
box-shadow:0 0 0 7px rgba(76,127,212,.14);
color:var(--ktlg-white);
font-size:.76rem;
font-weight:850;
cursor:pointer;
transform:translate(-50%,-50%);
transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.ktlg-pin:hover,.ktlg-pin:focus-visible,.ktlg-pin[aria-pressed="true"]{
outline:none;
border-color:var(--ktlg-primary-light);
background:var(--ktlg-primary);
transform:translate(-50%,-50%) scale(1.1);
}
.ktlg-pin::after{
content:attr(data-label);
position:absolute;
left:50%;
bottom:calc(100% + 13px);
width:max-content;
max-width:270px;
padding:8px 10px;
border:1px solid var(--ktlg-border-strong);
border-radius:8px;
background:rgba(8,16,28,.98);
color:var(--ktlg-white);
font-size:.72rem;
line-height:1.35;
font-weight:760;
white-space:normal;
opacity:0;
pointer-events:none;
transform:translate(-50%,6px);
transition:.18s ease;
box-shadow:0 12px 28px rgba(0,0,0,.3);
}
.ktlg-pin:hover::after,.ktlg-pin:focus-visible::after,.ktlg-pin[aria-pressed="true"]::after{
opacity:1;
transform:translate(-50%,0);
}
.side-1{left:7.4%;top:31%} .side-2{left:9.1%;top:55%}
.side-3{left:47%;top:18%} .side-4{left:48%;top:82%}
.side-5{left:39%;top:76%} .side-6{left:58%;top:46%}
.side-7{left:66%;top:22%} .side-8{left:18%;top:33%}
.side-9{left:70%;top:80%}
.rear-10{left:47%;top:43%} .rear-11{left:66%;top:48%}
.rear-12{left:26%;top:72%}
.ktlg-xray__detail{
display:grid;
grid-template-columns:90px minmax(0,1.25fr) minmax(240px,.75fr);
gap:25px;
align-items:start;
padding:27px;
border-top:1px solid var(--ktlg-border);
background:linear-gradient(180deg,rgba(22,34,56,.92),rgba(13,23,38,.97));
}
.ktlg-detail-number{
color:rgba(76,127,212,.55);
font:700 4.5rem/.9 var(--ktlg-serif);
letter-spacing:-.05em;
}
.ktlg-detail-copy h3{margin:0 0 9px;color:var(--ktlg-white);font-size:1.34rem;line-height:1.22}
.ktlg-detail-copy p{margin:0;color:var(--ktlg-text-soft)}
.ktlg-detail-grid{display:grid;gap:10px;margin-top:16px}
.ktlg-detail-fact{
padding:12px 14px;
border-left:2px solid var(--ktlg-primary);
background:rgba(11,18,32,.44);
color:var(--ktlg-text-soft);
font-size:.9rem;
}
.ktlg-detail-fact strong{color:var(--ktlg-white)}
.ktlg-why{
padding:18px;
border:1px solid var(--ktlg-border);
border-radius:14px;
background:rgba(11,18,32,.58);
}
.ktlg-why span{
display:block;
margin-bottom:8px;
color:var(--ktlg-primary-light);
font-size:.7rem;
font-weight:850;
letter-spacing:.13em;
text-transform:uppercase;
}
.ktlg-why strong{color:var(--ktlg-white);font-size:.96rem;line-height:1.48}
.ktlg-mobile-parts{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.ktlg-mobile-parts button{
min-height:54px;
padding:11px 12px;
border:1px solid var(--ktlg-border);
border-radius:10px;
background:var(--ktlg-surface);
color:var(--ktlg-text-soft);
text-align:left;
cursor:pointer;
}
.ktlg-mobile-parts button b{color:var(--ktlg-primary-light);margin-right:6px}
.ktlg-mobile-parts button[aria-pressed="true"]{
border-color:var(--ktlg-primary-light);
background:rgba(43,93,168,.18);
color:var(--ktlg-white);
}
.ktlg-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:21px}
.ktlg-block{
position:relative;
overflow:hidden;
border:1px solid var(--ktlg-border);
border-radius:18px;
background:linear-gradient(180deg,var(--ktlg-surface),var(--ktlg-surface-3));
box-shadow:0 18px 48px rgba(3,9,18,.18);
}
.ktlg-block__body{padding:29px}
.ktlg-block h3{
margin:11px 0 13px;
color:var(--ktlg-white);
font:700 clamp(1.65rem,3vw,2.45rem)/1.08 var(--ktlg-serif);
letter-spacing:-.027em;
}
.ktlg-block p{margin-bottom:0;color:var(--ktlg-text-soft)}
.ktlg-block--practice{grid-column:span 7}
.ktlg-block--important{grid-column:span 5;border-color:rgba(215,163,74,.44);background:radial-gradient(circle at 90% 0,rgba(215,163,74,.12),transparent 21rem),linear-gradient(180deg,var(--ktlg-surface),var(--ktlg-surface-3))}
.ktlg-block--important .ktlg-label{color:var(--ktlg-amber)}
.ktlg-block--definition{grid-column:1/-1}
.ktlg-block--checklist{grid-column:1/-1}
.ktlg-comparison{
display:grid;
grid-template-columns:1fr 1fr;
margin-top:23px;
overflow:hidden;
border:1px solid var(--ktlg-border);
border-radius:12px;
}
.ktlg-comparison div{padding:17px 18px;background:var(--ktlg-surface-3)}
.ktlg-comparison div:nth-child(odd){border-right:1px solid var(--ktlg-border)}
.ktlg-comparison strong{display:block;margin-bottom:4px;color:var(--ktlg-white);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.ktlg-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:23px 0 0;padding:0;list-style:none}
.ktlg-checklist li{
position:relative;
min-height:72px;
padding:15px 15px 15px 48px;
border:1px solid var(--ktlg-border);
border-radius:12px;
background:rgba(11,18,32,.42);
color:var(--ktlg-text-soft);
}
.ktlg-checklist li::before{
content:"";
position:absolute;
left:16px;top:18px;
width:18px;height:18px;
border:2px solid var(--ktlg-primary-light);
border-radius:5px;
box-shadow:inset 0 0 0 4px rgba(76,127,212,.11);
}
.ktlg-rentgen-note{
margin-top:26px;
padding:22px 24px;
border-left:3px solid var(--ktlg-primary-light);
background:linear-gradient(90deg,rgba(76,127,212,.1),transparent);
color:var(--ktlg-text-soft);
}
.ktlg-rentgen-note strong{color:var(--ktlg-white)}
.ktlg-conclusion{
position:relative;
overflow:hidden;
padding:clamp(34px,6vw,68px);
border:1px solid var(--ktlg-border-strong);
border-radius:22px;
background:
radial-gradient(circle at 90% 8%,rgba(76,127,212,.22),transparent 29rem),
linear-gradient(135deg,var(--ktlg-surface-2),var(--ktlg-surface-3));
box-shadow:0 30px 90px rgba(2,8,18,.3);
}
.ktlg-conclusion::before{
content:"?";
position:absolute;
right:4%;
bottom:-35%;
color:rgba(76,127,212,.09);
font:700 min(32vw,21rem)/1 var(--ktlg-serif);
}
.ktlg-conclusion blockquote{
position:relative;
z-index:1;
max-width:890px;
margin:12px 0 22px;
color:var(--ktlg-white);
font:700 clamp(2rem,5vw,4.2rem)/1.08 var(--ktlg-serif);
letter-spacing:-.037em;
}
.ktlg-conclusion p{position:relative;z-index:1;max-width:760px;margin:0;color:var(--ktlg-text-soft)}
.ktlg-sources{
padding:28px;
border:1px solid var(--ktlg-border);
border-radius:16px;
background:rgba(17,26,43,.64);
}
.ktlg-sources ol{margin:18px 0 0;padding-left:1.25rem}
.ktlg-sources li{margin:.72rem 0;color:var(--ktlg-text-soft)}
.ktlg-next{
display:grid;
grid-template-columns:1fr auto;
gap:22px;
align-items:center;
padding:27px;
border:1px solid var(--ktlg-border);
border-radius:16px;
background:linear-gradient(135deg,var(--ktlg-surface),var(--ktlg-surface-3));
}
.ktlg-next h3{margin:7px 0 6px;color:var(--ktlg-white);font:700 1.7rem/1.1 var(--ktlg-serif)}
.ktlg-next p{margin:0;color:var(--ktlg-text-soft)}
.ktlg-next__mark{font:700 4.3rem/.8 var(--ktlg-serif);color:rgba(76,127,212,.42)}
.ktlg-footer{padding:12px 0 48px;color:var(--ktlg-muted);font-size:.78rem;text-align:center}
@media(max-width:920px){
.ktlg-hero{grid-template-columns:1fr;align-items:start}
.ktlg-hero-question{max-width:680px}
.ktlg-xray__detail{grid-template-columns:75px 1fr}
.ktlg-why{grid-column:2}
.ktlg-block--practice,.ktlg-block--important{grid-column:1/-1}
}
@media(max-width:720px){
body{font-size:16px}
.ktlg-shell{width:min(100% - 24px,1140px)}
.ktlg-reader-header__inner{height:70px}
.ktlg-series-pill span{display:none}
.ktlg-hero{padding-top:54px}
.ktlg-hero h1{font-size:clamp(3rem,15vw,4.7rem)}
.ktlg-xray__bar{align-items:flex-start;flex-direction:column}
.ktlg-stage{min-height:275px;padding:10px}
.ktlg-view{inset:10px}
.ktlg-pin{display:none}
.ktlg-mobile-parts{display:grid}
.ktlg-xray__detail{grid-template-columns:52px 1fr;gap:15px;padding:20px 15px}
.ktlg-detail-number{font-size:3rem}
.ktlg-why{grid-column:1/-1}
.ktlg-block__body{padding:23px}
.ktlg-comparison{grid-template-columns:1fr}
.ktlg-comparison div:nth-child(odd){border-right:0;border-bottom:1px solid var(--ktlg-border)}
.ktlg-checklist{grid-template-columns:1fr}
.ktlg-next{grid-template-columns:1fr}
.ktlg-next__mark{display:none}
}
@media(max-width:430px){
.ktlg-mobile-parts{grid-template-columns:1fr}
.ktlg-stage{min-height:235px}
.ktlg-view-tabs{width:100%}
.ktlg-view-tab{flex:1}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important}
}
/* =========================================================
RENTGEN 20DV 2.0 - warstwy, przekrój, aktywne SVG, zoom
========================================================= */
.ktlg-xray-v2{overflow:hidden;isolation:isolate}
.ktlg-xray-brandline{display:flex;align-items:center;gap:10px}
.ktlg-xray-live-dot{width:8px;height:8px;border-radius:50%;background:var(--ktlg-green);box-shadow:0 0 0 6px rgba(101,181,138,.12),0 0 18px rgba(101,181,138,.58)}
.ktlg-xray-progress{display:grid;grid-template-columns:auto 118px;gap:10px;align-items:center;color:var(--ktlg-muted);font-size:.72rem}
.ktlg-xray-progress i{display:block;height:5px;overflow:hidden;border-radius:999px;background:rgba(113,130,157,.18)}
.ktlg-xray-progress b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ktlg-primary),var(--ktlg-cyan));transition:width .25s ease}
.ktlg-xray-tools{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ktlg-border);background:rgba(8,16,28,.72)}
.ktlg-view-tabs{flex:0 0 auto}
.ktlg-view-tab{min-width:78px;transition:.18s ease}
.ktlg-layer-switches{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
.ktlg-layer-switches label{position:relative;cursor:pointer}
.ktlg-layer-switches input{position:absolute;opacity:0;pointer-events:none}
.ktlg-layer-switches span{display:block;padding:7px 10px;border:1px solid var(--ktlg-border);border-radius:8px;background:rgba(17,26,43,.8);color:var(--ktlg-muted);font-size:.69rem;font-weight:780;line-height:1}
.ktlg-layer-switches input:checked+span{border-color:rgba(76,127,212,.72);background:rgba(43,93,168,.2);color:var(--ktlg-white)}
.ktlg-focus-toggle span{border-style:dashed}
.ktlg-force-demo{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:7px 11px;border:1px solid rgba(215,163,74,.42);border-radius:8px;background:rgba(215,163,74,.08);color:#f2c97e;font-size:.7rem;font-weight:850;cursor:pointer;white-space:nowrap}
.ktlg-force-demo:hover,.ktlg-force-demo.is-active{background:rgba(215,163,74,.18);border-color:var(--ktlg-amber);color:var(--ktlg-white)}
.ktlg-force-demo span{font-size:1rem}
.ktlg-xray__workspace{display:grid;grid-template-columns:minmax(0,1fr) 286px;min-height:600px}
.ktlg-xray-canvas{position:relative;min-width:0;min-height:600px;overflow:hidden;border-right:1px solid var(--ktlg-border);background:radial-gradient(circle at 50% 42%,rgba(76,127,212,.11),transparent 28rem)}
.ktlg-xray-canvas::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(76,127,212,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(76,127,212,.045) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.ktlg-xray-canvas .ktlg-view{position:absolute;inset:0;display:none;padding:48px 18px 35px}
.ktlg-xray-canvas .ktlg-view.is-active{display:block}
.ktlg-xray-canvas svg{width:100%;height:100%;max-height:none;touch-action:none;cursor:grab;user-select:none}
.ktlg-xray-canvas svg.is-panning{cursor:grabbing}
.ktlg-stage-readout{position:absolute;z-index:5;top:17px;left:18px;display:flex;align-items:center;gap:11px;max-width:calc(100% - 150px);padding:9px 12px;border:1px solid rgba(53,80,120,.65);border-radius:10px;background:rgba(8,16,28,.86);backdrop-filter:blur(10px);box-shadow:0 14px 28px rgba(0,0,0,.18)}
.ktlg-stage-readout>span{color:var(--ktlg-primary-light);font:700 1.65rem/1 var(--ktlg-serif)}
.ktlg-stage-readout small,.ktlg-stage-readout strong{display:block}.ktlg-stage-readout small{color:var(--ktlg-muted);font-size:.61rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.ktlg-stage-readout strong{overflow:hidden;color:var(--ktlg-white);font-size:.82rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.ktlg-zoom-controls{position:absolute;z-index:6;top:17px;right:17px;display:grid;grid-template-columns:repeat(3,34px);overflow:hidden;border:1px solid var(--ktlg-border);border-radius:9px;background:rgba(8,16,28,.9)}
.ktlg-zoom-controls button{height:34px;border:0;border-right:1px solid var(--ktlg-border);background:transparent;color:var(--ktlg-text-soft);font-size:1rem;cursor:pointer}.ktlg-zoom-controls button:last-child{border-right:0}.ktlg-zoom-controls button:hover{background:rgba(76,127,212,.16);color:var(--ktlg-white)}
.ktlg-stage-hint{position:absolute;z-index:4;left:18px;right:18px;bottom:12px;display:flex;justify-content:space-between;gap:14px;color:rgba(113,130,157,.75);font-size:.62rem;pointer-events:none}
.ktlg-parts-panel{min-width:0;background:linear-gradient(180deg,rgba(17,26,43,.96),rgba(13,23,38,.98))}
.ktlg-parts-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:17px 15px;border-bottom:1px solid var(--ktlg-border)}
.ktlg-parts-panel__head small,.ktlg-parts-panel__head strong{display:block}.ktlg-parts-panel__head small{color:var(--ktlg-muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}.ktlg-parts-panel__head strong{margin-top:2px;color:var(--ktlg-white);font-size:.88rem}.ktlg-parts-panel__head>span{padding:5px 7px;border-radius:6px;background:rgba(76,127,212,.1);color:var(--ktlg-primary-light);font-size:.62rem;white-space:nowrap}
.ktlg-parts-list{height:535px;overflow:auto;padding:8px;scrollbar-width:thin;scrollbar-color:var(--ktlg-border-strong) transparent}
.ktlg-part-button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ktlg-text-soft);text-align:left;cursor:pointer;transition:.16s ease}
.ktlg-part-button:hover{border-color:var(--ktlg-border);background:rgba(76,127,212,.06)}
.ktlg-part-button[aria-pressed="true"]{border-color:rgba(76,127,212,.7);background:linear-gradient(90deg,rgba(43,93,168,.22),rgba(43,93,168,.06));color:var(--ktlg-white)}
.ktlg-part-button>span:first-child{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--ktlg-border);border-radius:50%;color:var(--ktlg-primary-light);font-size:.64rem;font-weight:850}.ktlg-part-button[aria-pressed="true"]>span:first-child{border-color:var(--ktlg-primary-light);background:var(--ktlg-primary);color:#fff;box-shadow:0 0 0 5px rgba(76,127,212,.11)}
.ktlg-part-button strong,.ktlg-part-button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ktlg-part-button strong{font-size:.73rem}.ktlg-part-button small{margin-top:1px;color:var(--ktlg-muted);font-size:.6rem}
.ktlg-part-shape{transition:opacity .2s ease,filter .2s ease}.ktlg-xray-v2[data-focus="true"] .ktlg-part-shape:not(.is-active){opacity:.28}.ktlg-part-shape.is-active{opacity:1!important;filter:drop-shadow(0 0 7px rgba(117,181,217,.92)) drop-shadow(0 0 18px rgba(76,127,212,.48))}
.ktlg-layer-hidden{opacity:.035!important;pointer-events:none}.ktlg-force-layer{opacity:0;transition:opacity .25s ease}.ktlg-force-layer.is-visible{opacity:1}.ktlg-force-blue,.ktlg-force-amber{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:9 11}.ktlg-force-blue{stroke:#75b5d9}.ktlg-force-amber{stroke:#d7a34a}.ktlg-force-label{fill:#75b5d9;font:700 15px/1 var(--ktlg-sans);letter-spacing:.05em;text-transform:uppercase}.ktlg-force-label.amber{fill:#d7a34a}.ktlg-xray-v2.is-force-running .ktlg-force-blue,.ktlg-xray-v2.is-force-running .ktlg-force-amber{animation:ktlg-force-flow 1.25s linear infinite}@keyframes ktlg-force-flow{to{stroke-dashoffset:-40}}
.ktlg-svg-floorline path{fill:none;stroke:rgba(117,181,217,.18);stroke-width:2}.ktlg-drawing-caption text{fill:var(--ktlg-muted);font:700 14px/1 var(--ktlg-sans);letter-spacing:.1em}.ktlg-demo-load{transition:opacity .2s}.ktlg-hotspot{cursor:pointer;transform-box:fill-box;transform-origin:center;outline:none}.ktlg-hotspot .hit{fill:transparent;stroke:none}.ktlg-hotspot circle:not(.hit){fill:rgba(8,16,28,.96);stroke:#75b5d9;stroke-width:2.5;vector-effect:non-scaling-stroke}.ktlg-hotspot text{fill:#fff;font:850 10px/1 var(--ktlg-sans);text-anchor:middle;dominant-baseline:central;pointer-events:none}.ktlg-hotspot:hover circle:not(.hit),.ktlg-hotspot:focus-visible circle:not(.hit),.ktlg-hotspot.is-active circle:not(.hit){fill:var(--ktlg-primary);stroke:#fff;filter:drop-shadow(0 0 8px rgba(76,127,212,.9))}.ktlg-hotspot.is-active{animation:ktlg-hotspot-pulse .5s ease}@keyframes ktlg-hotspot-pulse{50%{opacity:.62}}
.ktlg-xray-v2 .ktlg-xray__detail{grid-template-columns:80px minmax(0,1.35fr) minmax(250px,.65fr);padding:24px 26px}.ktlg-detail-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:8px}.ktlg-detail-heading small{display:block;margin-bottom:4px;color:var(--ktlg-primary-light);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.ktlg-detail-heading h3{margin:0}.ktlg-detail-nav{display:flex;overflow:hidden;flex:0 0 auto;border:1px solid var(--ktlg-border);border-radius:8px}.ktlg-detail-nav button{width:34px;height:32px;border:0;border-right:1px solid var(--ktlg-border);background:rgba(8,16,28,.5);color:var(--ktlg-text-soft);cursor:pointer}.ktlg-detail-nav button:last-child{border-right:0}.ktlg-detail-nav button:hover{background:rgba(76,127,212,.14);color:#fff}.ktlg-why button{width:100%;margin-top:14px;padding:9px 11px;border:1px solid rgba(215,163,74,.35);border-radius:8px;background:rgba(215,163,74,.07);color:#f1c678;font-size:.72rem;font-weight:800;cursor:pointer}.ktlg-why button:hover{background:rgba(215,163,74,.16);color:#fff}.ktlg-xray-footnote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--ktlg-border);background:rgba(8,16,28,.72);color:var(--ktlg-muted);font-size:.64rem}.ktlg-xray-footnote span{display:inline-flex;align-items:center;gap:6px}.ktlg-xray-footnote i{width:16px;height:3px;border-radius:99px}.ktlg-xray-footnote i.blue{background:#75b5d9}.ktlg-xray-footnote i.amber{background:#d7a34a}.ktlg-xray-footnote span:last-child{margin-left:auto}
@media(max-width:1020px){.ktlg-xray-tools{align-items:flex-start;flex-wrap:wrap}.ktlg-layer-switches{order:3;width:100%;margin-left:0}.ktlg-xray__workspace{grid-template-columns:1fr}.ktlg-xray-canvas{min-height:560px;border-right:0;border-bottom:1px solid var(--ktlg-border)}.ktlg-parts-panel__head{display:none}.ktlg-parts-list{height:auto;display:flex;gap:8px;overflow-x:auto;padding:10px;scroll-snap-type:x proximity}.ktlg-part-button{flex:0 0 230px;scroll-snap-align:start;border-color:var(--ktlg-border);background:rgba(8,16,28,.45)}.ktlg-xray-v2 .ktlg-xray__detail{grid-template-columns:68px 1fr}.ktlg-xray-v2 .ktlg-why{grid-column:2}.ktlg-xray-footnote span:last-child{width:100%;margin-left:0}}
@media(max-width:720px){.ktlg-xray-v2{margin-inline:-2px;border-radius:16px}.ktlg-xray-v2 .ktlg-xray__bar{align-items:flex-start;flex-direction:column;padding:13px 14px}.ktlg-xray-progress{width:100%;grid-template-columns:auto 1fr}.ktlg-xray-tools{gap:9px;padding:10px}.ktlg-view-tabs{width:100%}.ktlg-view-tab{flex:1;min-width:0}.ktlg-force-demo{width:100%;justify-content:center}.ktlg-layer-switches{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.ktlg-layer-switches span{text-align:center}.ktlg-xray-canvas{min-height:420px}.ktlg-xray-canvas .ktlg-view{padding:56px 2px 32px}.ktlg-stage-readout{top:10px;left:10px;max-width:calc(100% - 120px);padding:7px 9px}.ktlg-stage-readout>span{font-size:1.25rem}.ktlg-stage-readout strong{max-width:150px}.ktlg-zoom-controls{top:10px;right:10px;grid-template-columns:repeat(3,30px)}.ktlg-zoom-controls button{height:30px}.ktlg-stage-hint{left:10px;right:10px;font-size:.56rem}.ktlg-part-button{flex-basis:210px}.ktlg-xray-v2 .ktlg-xray__detail{grid-template-columns:48px 1fr;gap:13px;padding:18px 13px}.ktlg-detail-number{font-size:2.8rem}.ktlg-detail-heading{gap:8px}.ktlg-detail-heading h3{font-size:1.08rem}.ktlg-detail-nav button{width:31px}.ktlg-xray-v2 .ktlg-why{grid-column:1/-1}.ktlg-xray-footnote{align-items:flex-start;flex-direction:column;gap:7px}.ktlg-xray-footnote span:last-child{width:auto}.ktlg-hotspot circle:not(.hit){stroke-width:3}.ktlg-hotspot text{font-size:11px}}
@media(max-width:430px){.ktlg-layer-switches{grid-template-columns:repeat(2,1fr)}.ktlg-xray-canvas{min-height:300px}.ktlg-xray-canvas .ktlg-view{padding-top:52px}.ktlg-stage-hint span:last-child{display:none}.ktlg-part-button{flex-basis:194px}.ktlg-detail-heading{display:block}.ktlg-detail-nav{width:max-content;margin-top:9px}}
@media(prefers-reduced-motion:reduce){.ktlg-xray-v2.is-force-running .ktlg-force-blue,.ktlg-xray-v2.is-force-running .ktlg-force-amber{animation:none}.ktlg-hotspot.is-active{animation:none}}