:root{
--bg:			#121316;
--bg-panel:		#FFFFFF;
--line:			#2a2d33;
--line-soft:	#232529;
--text:			#000000;
--text-dim:		#292929;
--text-faint:	#6b6e74;
--copper:		#ff491c;
--copper-dim:	#b8330f;
--cyan:			#ff491c;
}

*{box-sizing:border-box;}

.wrap-teardown {
	max-width:1280px;
	margin:0 auto;
}

h1 {
	font-family:'Space Grotesk',sans-serif;
	font-size:22px;
	font-weight:600;
	margin:0 0 6px;
}
.eyebrow {
	font-family:'IBM Plex Mono',monospace;
	font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--copper);
}
.lede{color:var(--text-dim);font-size:14px;max-width:620px;margin:14px 0 32px;}
.lede code{
background:var(--bg-panel);border:1px solid var(--line);padding:1px 5px;border-radius:3px;
font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--cyan);
}

.panel{
display:				grid;
gap:					24px;
background:				var(--bg-panel);
border:					0px solid var(--line);
border-radius:			3px;
padding:				20px;
}
@media (max-width:1280px){.panel{grid-template-columns:1fr;}}

/* ---- the component ---- */
.td-diagram{
position:		relative;
width:			100%;
aspect-ratio:	760/480;
background:		#FFFFFF;
border-radius:	2px;
overflow:		visible;
}
.td-photo-svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.td-overlay {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	overflow:visible;
}

.td-leader{stroke:var(--copper-dim);stroke-width:2;fill:none;transition:stroke 0.15s;}
.td-leader.active{stroke:var(--copper);stroke-width:2;}

.td-badge circle{fill:var(--bg-panel);stroke:var(--copper-dim);stroke-width:1.2;transition:stroke 0.15s;}
.td-badge text{fill:var(--text-dim);font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;transition:fill 0.15s;}
.td-badge{cursor:pointer;}
.td-badge.active circle{stroke:var(--copper);}
.td-badge.active text{fill:var(--copper);}

.td-point {
	fill:		var(--cyan);
	opacity:	0.85;
}

.td-caption{
font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-faint);
margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
}

.td-legend{list-style:none;margin:0;padding:0;}
.td-legend h3{
font-family:'Space Grotesk',sans-serif;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;
color:var(--text-dim);margin:0 0 14px;font-weight:600;
}
.td-legend li{
display:flex;gap:12px;padding:10px 8px;border-bottom:1px solid var(--line-soft);font-size:13px;
cursor:pointer;border-radius:2px;transition:background 0.15s;
}
.td-legend li:last-child{border-bottom:none;}
.td-legend li.active{background:rgba(201,124,76,0.08);}
.td-legend-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--copper);width:16px;flex-shrink:0;}
.td-legend-text{color:var(--text-dim);}
.td-legend-text b{color:var(--text);font-weight:500;}

.usage{
margin-top:40px;
background:var(--bg-panel);
border:1px solid var(--line);
border-radius:3px;
padding:22px 24px;
}
.usage h2{font-family:'Space Grotesk',sans-serif;font-size:15px;margin:0 0 12px;}
.usage pre{
margin:0;
font-family:'IBM Plex Mono',monospace;
font-size:12px;
color:var(--text-dim);
overflow-x:auto;
line-height:1.6;
}
.usage .k{color:var(--cyan);}
.usage .s{color:var(--copper);}

.steps{border-top:1px solid var(--line);}
  .step{
    display:				grid;
    grid-template-columns:	64px 1fr;
    gap:					10px;
    padding:				12px 0;
    border-bottom:			1px solid var(--line-soft);
  }
  .step-num{
    font-family:			'Space Grotesk',sans-serif;
    font-size:				26px;
    font-weight:			600;
    color:					var(--line);
  }
  .step h4{margin:2px 0 2px;font-size:15px;font-weight:600;}
  .step p{margin:0;font-size:13.5px;color:var(--text-dim);max-width:640px;}
  .step-tag{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    color:var(--warn);
    border:1px solid rgba(196,87,74,0.35);
    padding:2px 7px;
    border-radius:2px;
    margin-left:10px;
    vertical-align:middle;
  }
  
  .warn-strip{
    margin-top:16px;
    padding:12px 14px;
    background:rgba(196,87,74,0.08);
    border:1px solid rgba(196,87,74,0.25);
    border-radius:2px;
    font-size:12px;
    color:#d68e85;
    display:flex;
    gap:10px;
  }
  
  .disclaimer-strip{
    margin-top:16px;
    padding:12px 14px;
    background:rgba(196,87,74,0.08);
    border:1px solid rgba(196,87,74,0.25);
    border-radius:2px;
    font-size:12px;
    color:#d68e85;
    display:flex;
    gap:10px;
  }
  
  
.video-wrap {
  position: 	relative;
  width: 		100%;
  aspect-ratio: 16 / 9;
}
.video-wrap iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}