.device-teardown,
.device-teardown * { box-sizing: border-box; }
.device-teardown {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #05090b;
  color: #edf3f1;
  overflow: hidden;
}
.device-teardown::backdrop { background: rgba(2,6,8,.92); backdrop-filter: blur(12px); }
.dt-shell { min-height: 100%; height: 100%; overflow: auto; background: radial-gradient(circle at 58% 36%,rgba(31,78,99,.22),transparent 33%),#05090b; }
.dt-topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; padding: 12px clamp(18px,3vw,48px); border-bottom: 1px solid #273339; background: rgba(5,9,11,.88); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.dt-brand { display: flex; align-items: center; gap: 13px; }
.dt-brand>i { width: 42px; height: 42px; border: 1px solid #ff6b35; border-radius: 50%; display: grid; place-items: center; color: #ff7c4b; font: 12px Georgia; font-style: normal; }
.dt-brand span,.dt-brand small,.dt-brand b { display: block; }
.dt-brand small { color: #718188; font-size: 8px; font-weight: 800; letter-spacing: 1.7px; }
.dt-brand b { margin-top: 4px; font-size: 13px; }
.dt-top-actions { display: flex; align-items: center; gap: 16px; }
.dt-top-actions>span { color: #718188; font-size: 8px; letter-spacing: 1.5px; }
.dt-top-actions button { width: 46px; height: 46px; border: 1px solid #405057; border-radius: 50%; background: #0d161a; color: #fff; font-size: 25px; cursor: pointer; touch-action: manipulation; }

.dt-device-picker { padding: 12px clamp(18px,3.2vw,52px); border-bottom: 1px solid #202c31; background: #070d10; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 7px; }
.dt-device-picker button { min-width: 0; min-height: 58px; border: 1px solid #29383e; background: #0b1418; color: #7f9095; padding: 8px 11px; display: grid; grid-template-columns: 31px 1fr; gap: 9px; align-items: center; text-align: left; cursor: pointer; touch-action: manipulation; }
.dt-device-picker button>i { width: 30px; height: 30px; border: 1px solid #3d4e54; border-radius: 50%; display: grid; place-items: center; font: 8px Georgia; font-style: normal; }
.dt-device-picker span,.dt-device-picker b,.dt-device-picker small { min-width: 0; display: block; }
.dt-device-picker b { color: #d6dfdc; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-device-picker small { margin-top: 3px; color: #617277; font-size: 6px; letter-spacing: .7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-device-picker button.active { border-color: #ff6b35; background: #251815; box-shadow: inset 0 -3px #ff6b35; }
.dt-device-picker button.active>i { border-color: #ff6b35; background: #ff6b35; color: #1a0e0a; }

.dt-main { min-height: min(650px,calc(100dvh - 220px)); padding: clamp(22px,3vw,46px) clamp(18px,3.2vw,52px) 24px; display: grid; grid-template-columns: minmax(250px,.46fr) minmax(0,1.54fr); gap: clamp(18px,2.4vw,38px); align-items: center; }
.dt-intro { position: relative; z-index: 2; }
.dt-kicker { color: #ff7040; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.dt-intro h2 { margin: 15px 0 14px; font-size: clamp(34px,4vw,64px); line-height: 1.02; letter-spacing: -2px; }
.dt-intro h2 em { color: #ff6b35; font-style: normal; }
.dt-intro>p { margin: 0; max-width: 330px; color: #91a0a4; font-size: 11px; line-height: 1.85; }
.dt-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 24px; }
.dt-mode-switch button { min-height: 52px; border: 1px solid #34434a; background: #0c1519; color: #8fa0a4; padding: 9px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.dt-mode-switch button i { color: #5f7176; font: 9px Georgia; font-style: normal; }
.dt-mode-switch button.active { border-color: #ff6b35; background: #241815; color: #fff; box-shadow: inset 0 -3px #ff6b35; }
.dt-mode-switch button.active i { color: #ff7949; }
.dt-play { width: 100%; min-height: 68px; margin-top: 8px; border: 0; background: #ff6b35; color: #170d09; padding: 10px 13px; display: grid; grid-template-columns: 34px 1fr; align-items: center; text-align: left; cursor: pointer; touch-action: manipulation; }
.dt-play>span { grid-row: 1/3; width: 31px; height: 31px; border: 1px solid rgba(23,13,9,.38); border-radius: 50%; display: grid; place-items: center; font-size: 11px; }
.dt-play b,.dt-play small { display: block; }
.dt-play b { font-size: 11px; }
.dt-play small { margin-top: 3px; color: rgba(23,13,9,.64); font-size: 8px; }
.dt-play.playing { background: #ecf3f1; }
.dt-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.dt-specs>div { border: 1px solid #29373d; background: rgba(11,20,24,.76); padding: 10px; }
.dt-specs span,.dt-specs b { display: block; }
.dt-specs span { color: #607278; font-size: 7px; letter-spacing: 1px; }
.dt-specs b { margin-top: 5px; color: #d6e0dd; font: 10px Georgia; }

.dt-visual { min-width: 0; position: relative; }
.dt-mobile-guide { display: none; }
.dt-stage { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border: 1px solid #26343a; background: #020405; box-shadow: 0 35px 80px rgba(0,0,0,.45); }
.dt-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .65s ease,transform .9s cubic-bezier(.2,.8,.2,1),filter .65s ease; }
.dt-whole-image { opacity: 1; transform: scale(1); }
.dt-exploded-image { opacity: 0; transform: scale(.91); filter: blur(7px); }
.dt-visual[data-dt-view="exploded"] .dt-whole-image { opacity: 0; transform: scale(1.1); filter: blur(8px); }
.dt-visual[data-dt-view="exploded"] .dt-exploded-image { opacity: 1; transform: scale(1); filter: none; }
.dt-stage-action { position: absolute; z-index: 5; left: 50%; bottom: 28px; transform: translateX(-50%); min-width: 230px; min-height: 52px; border: 1px solid rgba(255,107,53,.7); background: rgba(13,12,11,.8); color: #fff; padding: 9px 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; cursor: pointer; backdrop-filter: blur(12px); transition: opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),background .2s ease; }
.dt-stage-action span { color: #ff7444; font: 8px Georgia; }
.dt-stage-action b { font-size: 10px; }
.dt-stage-action i { color: #ff7444; font-size: 17px; font-style: normal; }
.dt-stage-action:hover { background: rgba(49,25,17,.9); }
.dt-visual[data-dt-view="exploded"] .dt-stage-action { opacity: 0; pointer-events: none; transform: translate(-50%,18px); }
.dt-hotspots { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .35s ease .35s,transform .7s cubic-bezier(.2,.8,.2,1); }
.dt-visual[data-dt-view="exploded"] .dt-hotspots { opacity: 1; pointer-events: auto; }
.dt-hotspots button { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; transform: translate(-50%,-50%); border: 1px solid rgba(230,240,238,.72); border-radius: 50%; background: rgba(5,16,20,.68); color: #fff; padding: 0; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; box-shadow: 0 0 0 2px rgba(255,255,255,.08),0 3px 9px rgba(0,0,0,.38); backdrop-filter: blur(2px); transition: border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease; }
.dt-hotspots button::before { content:""; position: absolute; inset: -9px; border-radius: 50%; }
.dt-hotspots button span { font: 7px Georgia; }
.dt-hotspots button:hover { border-color: #ff916a; transform: translate(-50%,-50%) scale(1.08); }
.dt-hotspots button.active { border-color: #ff6b35; background: rgba(24,13,9,.86); color: #ff7b4a; box-shadow: 0 0 0 3px rgba(255,107,53,.18),0 4px 12px rgba(0,0,0,.45); }
.dt-marker-toggle { position: absolute; z-index: 4; top: 10px; right: 10px; min-height: 32px; border: 1px solid rgba(213,227,223,.28); border-radius: 18px; background: rgba(5,14,18,.72); color: #b9c7c3; padding: 5px 10px; display: flex; align-items: center; gap: 6px; font-size: 8px; cursor: pointer; backdrop-filter: blur(8px); transition: opacity .2s ease,border-color .2s ease,color .2s ease; }
.dt-marker-toggle span { color: #ff7444; }
.dt-visual[data-dt-view="whole"] .dt-marker-toggle { opacity: 0; pointer-events: none; }
.dt-visual.part-selected .dt-marker-toggle { opacity: 0; pointer-events: none; }
.dt-visual.markers-off .dt-hotspots { opacity: 0!important; pointer-events: none!important; }
.dt-visual.part-selected .dt-exploded-image { transform: translateX(-12%) scale(.9); filter: brightness(.72) saturate(.85); }
.dt-visual.part-selected .dt-hotspots { transform: translateX(-12%) scale(.9); transform-origin: center; }
.dt-sweep { position: absolute; inset: -20% auto -20% -25%; width: 13%; background: linear-gradient(90deg,transparent,rgba(110,209,255,.16),transparent); transform: skewX(-12deg); animation: dt-sweep 4.6s ease-in-out infinite; pointer-events: none; }
.dt-stage-label { position: absolute; z-index: 3; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; color: rgba(235,245,242,.72); font-size: 8px; letter-spacing: 1.4px; pointer-events: none; }
.dt-stage-label b { color: #ff7b4a; font: 9px Georgia; }
.dt-visual>p { margin: 9px 0 0; color: #5f7075; font-size: 8px; line-height: 1.6; text-align: center; }

.dt-detail { position: absolute; z-index: 6; top: 0; right: 0; bottom: 70px; width: min(390px,42%); border-left: 1px solid rgba(255,107,53,.62); background: linear-gradient(145deg,rgba(13,24,29,.97),rgba(4,9,12,.98)); padding: clamp(22px,2.4vw,38px); display: flex; flex-direction: column; justify-content: center; overflow: auto; opacity: 0; pointer-events: none; transform: translateX(105%); transition: opacity .32s ease,transform .62s cubic-bezier(.2,.8,.2,1); box-shadow: -28px 0 70px rgba(0,0,0,.48); }
.dt-visual.part-selected .dt-detail { opacity: 1; pointer-events: auto; transform: translateX(0); }
.dt-detail-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid #3b4b51; border-radius: 50%; background: #0d171b; color: #fff; font-size: 20px; cursor: pointer; }
.dt-detail>span { color: #ff7444; font-size: 8px; font-weight: 800; letter-spacing: 1.5px; }
.dt-detail h3 { margin: 12px 0 12px; font-size: clamp(22px,2.2vw,34px); line-height: 1.12; }
.dt-detail>p { margin: 0; color: #b5c1be; font-size: 10px; line-height: 1.8; }
.dt-detail dl { display: grid; gap: 11px; margin: 19px 0 0; }
.dt-detail dl>div { border-top: 1px solid #26343a; padding-top: 11px; }
.dt-detail dt { color: #718389; font-size: 8px; }
.dt-detail dd { margin: 5px 0 0; color: #aebcb8; font-size: 9px; line-height: 1.7; }
.dt-detail .dt-warning { border-left: 2px solid #ff6b35; padding-left: 11px; }
.dt-detail .dt-warning dt { color: #ff7b4a; }

.dt-part-rail { position: absolute; z-index: 7; left: 10px; right: 10px; bottom: 10px; padding: 6px; border: 1px solid rgba(87,107,113,.36); background: rgba(4,11,14,.82); backdrop-filter: blur(14px); display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 4px; opacity: 1; transform: translateY(0); transition: opacity .35s ease .28s,transform .55s cubic-bezier(.2,.8,.2,1); }
.dt-visual[data-dt-view="whole"] .dt-part-rail { opacity: 0; pointer-events: none; transform: translateY(28px); }
.dt-part-rail button { min-width: 0; min-height: 46px; border: 1px solid #27363c; background: #0b1317; color: #86989c; padding: 5px; display: grid; grid-template-columns: 23px 1fr; gap: 5px; align-items: center; text-align: left; cursor: pointer; touch-action: manipulation; }
.dt-part-rail button>i { width: 22px; height: 22px; border: 1px solid #425259; border-radius: 50%; display: grid; place-items: center; font: 7px Georgia; font-style: normal; }
.dt-part-rail span,.dt-part-rail b,.dt-part-rail small { min-width: 0; display: block; }
.dt-part-rail b { color: #d4ddda; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-part-rail small { margin-top: 3px; color: #617278; font-size: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-part-rail button.active { border-color: #ff6b35; background: #261916; box-shadow: inset 0 -3px #ff6b35; }
.dt-part-rail button.active>i { border-color: #ff6b35; background: #ff6b35; color: #1a0e0a; }

.dt-signal-path { margin: 0 clamp(18px,3.2vw,52px) 44px; border: 1px solid #29383e; background: #081014; padding: clamp(18px,2.3vw,32px); display: grid; grid-template-columns: minmax(190px,.45fr) minmax(600px,1.55fr); gap: 22px; align-items: center; }
.dt-signal-path>div:first-child>span { color: #ff7040; font-size: 7px; letter-spacing: 1.6px; }
.dt-signal-path h3 { margin: 7px 0 0; font-size: 18px; }
.dt-signal-steps { display: grid; grid-template-columns: repeat(var(--signal-count,5),1fr); gap: 7px; }
.dt-signal-steps button { min-height: 68px; border: 1px solid #304147; background: #0c171b; color: #d1dcda; padding: 8px; display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; text-align: left; cursor: pointer; touch-action: manipulation; }
.dt-signal-steps button i { color: #ff7545; font: 8px Georgia; font-style: normal; }
.dt-signal-steps button b { font-size: 9px; line-height: 1.35; }
.dt-signal-steps button span { color: #54676c; }
.dt-signal-steps button.active { border-color: #ff6b35; background: #251916; }
.dt-signal-path>p { grid-column: 2; margin: -11px 0 0; color: #7f9195; font-size: 8px; line-height: 1.6; }

.lv-teardown-launch { width: 100%; min-height: 66px; margin-top: 14px; border: 1px solid #ff6b35; background: #ff6b35; color: #1d100b; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; cursor: pointer; touch-action: manipulation; }
.lv-teardown-launch span,.lv-teardown-launch b { display: block; }
.lv-teardown-launch span { color: rgba(29,16,11,.65); font-size: 7px; letter-spacing: 1.2px; }
.lv-teardown-launch b { margin-top: 4px; font-size: 11px; }
.lv-teardown-launch i { grid-row: 1/3; grid-column: 2; font-size: 18px; font-style: normal; }
.light-off .lv-teardown-launch { color: #1d100b; }
.device-teardown button:focus-visible,.lv-teardown-launch:focus-visible { outline: 3px solid rgba(99,174,255,.78); outline-offset: 3px; }

@keyframes dt-sweep { 0%,20% { left:-25%; } 74%,100% { left:120%; } }
@media(max-width:1500px) {
  .dt-device-picker { grid-template-columns: repeat(6,minmax(0,1fr)); }
}
@media(max-width:1180px) {
  .dt-device-picker { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2,56px); grid-auto-columns: 190px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: none; }
  .dt-device-picker::-webkit-scrollbar { display: none; }
  .dt-device-picker button { scroll-snap-align: start; }
  .dt-main { grid-template-columns: minmax(210px,.42fr) minmax(0,1.58fr); }
  .dt-detail { width: min(350px,45%); padding: 25px; }
  .dt-signal-path { grid-template-columns: 1fr; }
  .dt-signal-path>p { grid-column: 1; margin: 0; }
}
@media(max-width:760px) {
  .device-teardown { overflow: auto; }
  .dt-topbar { min-height: 64px; padding: 9px 13px; }
  .dt-brand>i { width: 36px; height: 36px; }
  .dt-brand small,.dt-top-actions>span { display: none; }
  .dt-brand b { font-size: 11px; }
  .dt-top-actions button { width: 44px; height: 44px; }
  .dt-device-picker { padding: 9px 13px; grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2,56px); grid-auto-columns: 170px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 13px; scrollbar-width: none; }
  .dt-device-picker::-webkit-scrollbar { display: none; }
  .dt-device-picker button { min-height: 56px; padding: 7px 8px; scroll-snap-align: start; }
  .dt-device-picker b { font-size: 10px; }
  .dt-main { min-height: 0; padding: 24px 13px 18px; grid-template-columns: 1fr; gap: 18px; }
  .dt-intro h2 { font-size: 38px; letter-spacing: -1px; }
  .dt-intro>p { font-size: 11px; }
  .dt-mode-switch button { min-height: 52px; font-size: 11px; }
  .dt-mobile-guide { margin-bottom: 8px; border: 1px solid #314148; border-left: 3px solid #ff6b35; background: #0b1418; padding: 10px 11px; display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; color: #9aa9ac; font-size: 9px; line-height: 1.6; }
  .dt-mobile-guide i { width: 34px; height: 28px; border-radius: 4px; background: #ff6b35; color: #1b0e09; display: grid; place-items: center; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .6px; }
  .dt-mobile-guide b { display: block; margin-bottom: 1px; color: #e7eeec; font-size: 10px; }
  .dt-stage { aspect-ratio: auto; min-height: 0; height: calc(56.25vw + 53.375px); }
  .dt-stage img { inset: 0 0 auto; width: 100%; height: calc(100% - 68px); object-fit: contain; }
  .dt-hotspots { display: block; inset: 0 0 68px; }
  .dt-marker-toggle { display: none; }
  .dt-hotspots button { width: 20px; height: 20px; border: 0; border-radius: 4px; background: #ff6b35; color: #1b0e09; box-shadow: 0 2px 8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.65); backdrop-filter: none; }
  .dt-hotspots button span { font: 7px Georgia; font-weight: 800; }
  .dt-hotspots button.active { background: #f3f7f5; color: #1b0e09; box-shadow: 0 0 0 2px #ff6b35,0 4px 12px rgba(0,0,0,.7); }
  .dt-stage-action { bottom: 90px; min-width: 220px; }
  .dt-detail { position: fixed; z-index: 200; inset: auto 0 0; width: 100%; max-height: 74dvh; border-left: 0; border-top: 1px solid #ff6b35; border-radius: 22px 22px 0 0; padding: 28px 20px 24px; justify-content: flex-start; transform: translateY(105%); box-shadow: 0 -24px 70px rgba(0,0,0,.65); }
  .dt-visual.part-selected .dt-detail { transform: translateY(0); }
  .dt-detail h3 { font-size: 28px; }
  .dt-detail>p,.dt-detail dd { font-size: 11px; }
  .dt-detail dl { grid-template-columns: 1fr; }
  .dt-part-rail { left: 8px; right: 8px; bottom: 8px; padding: 5px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .dt-part-rail::-webkit-scrollbar { display: none; }
  .dt-part-rail button { flex: 0 0 142px; min-height: 52px; }
  .dt-part-rail b { font-size: 9px; }
  .dt-part-rail small { font-size: 7px; }
  .dt-visual.part-selected .dt-exploded-image { transform: scale(1); filter: none; }
  .dt-visual.part-selected .dt-hotspots { transform: none; }
  .dt-signal-path { margin: 0 13px 30px; padding: 17px; grid-template-columns: 1fr; gap: 14px; }
  .dt-signal-steps { grid-template-columns: 1fr; }
  .dt-signal-steps button { min-height: 54px; }
  .dt-signal-steps button b { font-size: 10px; }
  .dt-signal-path>p { grid-column: 1; margin: 0; font-size: 10px; }
}
@media(max-width:370px) {
  .dt-specs { grid-template-columns: 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .dt-stage img,.dt-hotspots,.dt-stage-action,.dt-detail,.dt-part-rail { transition: none; }
  .dt-sweep { animation: none; display: none; }
}