/* Shared, simplified device tutorial system */
.tutorial-v2 {
  --t2-ink: #121411;
  --t2-muted: #666b65;
  --t2-line: rgba(18, 20, 17, .12);
  --t2-paper: #f7f8f6;
  --t2-card: rgba(255, 255, 255, .9);
  --t2-tone: #3e6f91;
  --t2-tone-rgb: 62, 111, 145;
  --t2-tone-soft: #eaf2f7;
  --t2-type-display: clamp(3.35rem, 5.4vw, 5rem);
  --t2-type-section: clamp(2.2rem, 3.35vw, 3rem);
  --t2-type-heading: 1.2rem;
  --t2-type-body: 1rem;
  --t2-type-meta: .8125rem;
  --t2-leading-body: 1.68;
  background: var(--t2-paper);
  color: var(--t2-ink);
}

.tutorial-v2.tutorial-tone-green {
  --t2-tone: #3f735f;
  --t2-tone-rgb: 63, 115, 95;
  --t2-tone-soft: #eaf3ee;
}

.tutorial-v2.tutorial-tone-blue {
  --t2-tone: #456f91;
  --t2-tone-rgb: 69, 111, 145;
  --t2-tone-soft: #eaf2f8;
}

.tutorial-v2.tutorial-tone-purple {
  --t2-tone: #735f84;
  --t2-tone-rgb: 115, 95, 132;
  --t2-tone-soft: #f1edf4;
}

.tutorial-v2.tutorial-tone-gold {
  --t2-tone: #8b681f;
  --t2-tone-rgb: 139, 104, 31;
  --t2-tone-soft: #f8f1e1;
}

.tutorial-v2 main {
  overflow: hidden;
}

.t2-page {
  background:
    radial-gradient(circle at 86% 2%, rgba(var(--t2-tone-rgb), .11), transparent 29rem),
    linear-gradient(180deg, var(--t2-tone-soft) 0, var(--t2-paper) 28rem);
  padding: clamp(4rem, 6vw, 6rem) 0 clamp(5rem, 8vw, 8rem);
}

.t2-shell {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.t2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .52fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: end;
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.t2-kicker {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.35rem;
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
}

.t2-kicker::before {
  width: 1.7rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.t2-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: var(--t2-type-display);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 750;
  text-wrap: balance;
}

.t2-hero-copy {
  padding-bottom: .35rem;
}

.t2-hero-copy > p {
  max-width: 34rem;
  margin: 0 0 2rem;
  color: #3e433e;
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--t2-tone-rgb), .28);
  list-style: none;
}

.t2-facts li {
  min-width: 0;
  padding: 1rem .85rem 0 0;
}

.t2-facts li + li {
  padding-left: .85rem;
  border-left: 1px solid rgba(var(--t2-tone-rgb), .2);
}

.t2-facts span,
.t2-section-label {
  display: block;
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
  letter-spacing: .12em;
}

.t2-facts b {
  display: block;
  margin-top: .42rem;
  font-size: var(--t2-type-heading);
  line-height: 1.4;
}

.t2-section-intro {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(20rem, .5fr);
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.8rem;
}

.t2-section-intro h2 {
  max-width: 15ch;
  margin: .75rem 0 0;
  font-size: var(--t2-type-section);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 750;
  text-wrap: balance;
}

.t2-section-intro > p {
  max-width: 34rem;
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

@media (min-width: 981px) {
  #panoramic-camera .pano-position-intro {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  #panoramic-camera .pano-position-intro > p {
    max-width: none;
    white-space: nowrap;
  }
}

.t2-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, .72fr);
  min-height: 34rem;
  overflow: hidden;
  border: 1px solid rgba(var(--t2-tone-rgb), .24);
  border-radius: 2rem;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 24px 70px rgba(28, 33, 28, .08);
}

.t2-demo-visual {
  position: relative;
  display: grid;
  min-height: 34rem;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--t2-line);
  background: var(--t2-tone-soft);
}

.t2-demo-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 58%, rgba(18, 20, 17, .3) 100%);
  content: "";
  pointer-events: none;
}

.t2-demo-media {
  position: absolute;
  inset: 0;
}

.t2-demo-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.t2-demo-panels {
  position: absolute;
  z-index: 2;
  inset: 1rem 1rem 5.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  pointer-events: none;
}

#panoramic-camera .t2-demo-panels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.t2-demo-panel {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 1.25rem;
  background: rgba(18, 20, 17, .18);
  opacity: .42;
  transition: border-color .35s ease, box-shadow .35s ease, opacity .35s ease, transform .35s ease;
}

.t2-demo-panel > span {
  position: absolute;
  top: .8rem;
  left: .8rem;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(18, 20, 17, .12);
}

.t2-demo-panel.is-active {
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 3px rgba(var(--t2-tone-rgb), .7), 0 18px 40px rgba(18, 20, 17, .18);
  opacity: 1;
  transform: translateY(-2px);
}

.t2-demo-visual svg {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 47rem);
  height: auto;
  overflow: visible;
}

.t2-demo-visual .t2-boundary,
.t2-demo-visual .t2-structure {
  fill: rgba(255, 255, 255, .6);
  stroke: rgba(18, 20, 17, .28);
  stroke-width: 2;
}

.t2-demo-visual .t2-route,
.t2-demo-visual .t2-orbit,
.t2-demo-visual .t2-ray {
  fill: none;
  stroke: var(--t2-tone);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.t2-demo-visual .t2-orbit,
.t2-demo-visual .t2-ray {
  stroke-dasharray: 10 12;
}

.t2-demo-visual .t2-coverage {
  fill: rgba(var(--t2-tone-rgb), .11);
  stroke: rgba(var(--t2-tone-rgb), .55);
  stroke-width: 2;
}

.t2-demo-visual .t2-marker {
  fill: var(--t2-tone);
  stroke: #fff;
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
}

.t2-demo-visual .t2-device {
  fill: #fff;
  stroke: var(--t2-ink);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
}

.t2-demo-visual .t2-phase {
  opacity: .12;
}

.t2-demo-visual .t2-phase.is-active {
  opacity: 1;
}

.t2-demo-caption {
  position: absolute;
  z-index: 2;
  right: 1.5rem;
  bottom: 1.5rem;
  left: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(var(--t2-tone-rgb), .2);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 38px rgba(18, 20, 17, .08);
  backdrop-filter: blur(18px);
}

.t2-demo-caption b {
  font-size: var(--t2-type-heading);
}

.t2-demo-caption span {
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-demo-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 1.35rem;
}

.t2-demo-side > span {
  padding: .55rem .7rem .95rem;
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
  letter-spacing: .12em;
}

.t2-demo-steps {
  display: grid;
  gap: .6rem;
}

.t2-demo-step {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .25rem .85rem;
  width: 100%;
  padding: 1.15rem;
  border: 1px solid transparent;
  border-radius: 1.25rem;
  background: transparent;
  color: var(--t2-ink);
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.t2-demo-step:hover {
  transform: translateY(-1px);
  background: rgba(var(--t2-tone-rgb), .05);
}

.t2-demo-step.is-active {
  border-color: rgba(var(--t2-tone-rgb), .22);
  background: var(--t2-tone-soft);
}

.t2-demo-step > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  place-items: center;
  border: 1px solid rgba(var(--t2-tone-rgb), .28);
  border-radius: 999px;
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
}

.t2-demo-step b {
  font-size: var(--t2-type-heading);
  line-height: 1.4;
}

.t2-demo-step small {
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 1.2rem .75rem .5rem;
  border-top: 1px solid var(--t2-line);
  color: var(--t2-muted);
  font-size: var(--t2-type-meta);
}

.t2-demo-toggle {
  min-width: 5.8rem;
  padding: .65rem .9rem;
  border: 1px solid rgba(var(--t2-tone-rgb), .3);
  border-radius: 999px;
  background: #fff;
  color: var(--t2-tone);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* 全景相机：持机姿势与镜头方向分开说明，避免文字覆盖示范图。 */
#panoramic-camera .pano-position-demo .t2-demo-visual {
  min-height: 36rem;
  place-items: stretch;
  background: #f7f8f3;
}

#panoramic-camera .pano-position-demo .t2-demo-visual::after {
  display: none;
}

#panoramic-camera .pano-position-phase {
  display: none;
  width: 100%;
  min-height: 36rem;
  grid-template-columns: minmax(0, 1.08fr) minmax(17rem, .92fr);
  opacity: 0;
  pointer-events: none;
}

#panoramic-camera .pano-position-phase.is-active {
  display: grid;
  opacity: 1;
  pointer-events: auto;
}

#panoramic-camera .pano-pose-card {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  border-right: 1px solid var(--t2-line);
  background: #fbfbf7;
}

#panoramic-camera .pano-pose-photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #f5f4ed;
}

#panoramic-camera .pano-pose-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 14%;
}

#panoramic-camera .pano-pose-photo--detail img {
  object-position: 50% 14%;
  transform: translate(.58%, .42%) scale(1.0128);
  transform-origin: 50% 0;
}

#panoramic-camera .pano-pose-card figcaption {
  display: grid;
  gap: .28rem;
  padding: 1rem 1.25rem 1.15rem;
  border-top: 1px solid var(--t2-line);
  background: rgba(255, 255, 255, .94);
}

#panoramic-camera .pano-pose-card figcaption span,
#panoramic-camera .pano-direction-card header span {
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
  letter-spacing: .08em;
}

#panoramic-camera .pano-pose-card figcaption b,
#panoramic-camera .pano-direction-card header b {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.035em;
}

#panoramic-camera .pano-pose-card figcaption p,
#panoramic-camera .pano-direction-card > p {
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

#panoramic-camera .pano-direction-card {
  --pano-direction: #3f725f;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  color: var(--pano-direction);
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(226, 239, 231, .76));
}

#panoramic-camera .pano-direction-card--detail {
  --pano-direction: #4f7897;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(229, 238, 245, .82));
}

#panoramic-camera .pano-direction-card header {
  display: grid;
  gap: .35rem;
}

#panoramic-camera .pano-direction-card header b {
  color: var(--t2-ink);
}

#panoramic-camera .pano-direction-card svg {
  width: 100%;
  max-width: 22rem;
  margin: .6rem auto .25rem;
}

#panoramic-camera .pano-route-line {
  fill: none;
  stroke: rgba(30, 36, 32, .24);
  stroke-dasharray: 7 9;
  stroke-width: 3;
}

#panoramic-camera .pano-lens-beam {
  fill: none;
  stroke: var(--pano-direction);
  stroke-linecap: round;
  stroke-width: 8;
}

#panoramic-camera #pano-arrow-green path {
  fill: #3f725f;
}

#panoramic-camera #pano-arrow-blue path {
  fill: #4f7897;
}

#panoramic-camera .pano-camera-body {
  fill: #202521;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 3;
}

#panoramic-camera .pano-camera-lens {
  fill: var(--pano-direction);
  stroke: #fff;
  stroke-width: 4;
}

#panoramic-camera .pano-route-label,
#panoramic-camera .pano-direction-label {
  fill: var(--t2-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

#panoramic-camera .pano-route-label {
  fill: var(--t2-muted);
  font-size: 13px;
  font-weight: 600;
}

#panoramic-camera .pano-direction-card > p {
  padding-top: .9rem;
  border-top: 1px solid rgba(var(--t2-tone-rgb), .2);
}

#panoramic-camera .pano-direction-card > p strong {
  color: var(--t2-ink);
}

#panoramic-camera .pano-demo-hint {
  margin: auto .75rem .45rem;
  padding-top: 1rem;
  border-top: 1px solid var(--t2-line);
  color: var(--t2-muted);
  font-size: var(--t2-type-meta);
  line-height: 1.6;
}

.t2-execution {
  padding-top: clamp(5rem, 8vw, 8rem);
}

.t2-execution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--t2-line);
  border-bottom: 1px solid var(--t2-line);
}

#panoramic-camera .t2-execution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.t2-execution article {
  min-width: 0;
  padding: 2rem clamp(1rem, 2.4vw, 2.5rem) 2.3rem 0;
}

.t2-execution article + article {
  padding-left: clamp(1rem, 2.4vw, 2.5rem);
  border-left: 1px solid var(--t2-line);
}

.t2-execution article span {
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
}

.t2-execution article h3 {
  margin: 1.2rem 0 .75rem;
  font-size: var(--t2-type-heading);
  line-height: 1.4;
  letter-spacing: -.025em;
}

.t2-execution article p {
  max-width: 28rem;
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-check {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
  align-items: stretch;
  margin-top: 2.25rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(var(--t2-tone-rgb), .22);
  border-radius: 1.75rem;
  background: var(--t2-tone-soft);
}

.t2-check > div:first-child {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid rgba(var(--t2-tone-rgb), .2);
}

.t2-check > div:first-child .t2-section-label {
  flex: 0 0 auto;
}

.t2-check h2 {
  margin: 0;
  font-size: var(--t2-type-section);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.t2-check-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  counter-reset: t2-check-item;
  list-style: none;
}

.t2-check-list li {
  display: grid;
  position: relative;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: .35rem 1rem;
  min-height: 8.25rem;
  padding: 1.25rem;
  border: 1px solid rgba(var(--t2-tone-rgb), .18);
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, .75);
  counter-increment: t2-check-item;
}

.t2-check-list li::before {
  display: grid;
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid rgba(var(--t2-tone-rgb), .22);
  border-radius: .8rem;
  background: var(--t2-tone-soft);
  color: var(--t2-tone);
  content: "0" counter(t2-check-item);
  font-size: var(--t2-type-meta);
  font-weight: 700;
}

.t2-check-list b {
  display: block;
  grid-column: 2;
  font-size: var(--t2-type-heading);
  line-height: 1.35;
}

.t2-check-list span {
  display: block;
  grid-column: 2;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-note {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--t2-tone);
  background: rgba(255, 255, 255, .66);
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-note strong {
  flex: 0 0 auto;
  color: var(--t2-ink);
}

.t2-note a {
  color: var(--t2-tone);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.t2-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3.5rem, 6vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--t2-line);
}

.t2-actions p {
  max-width: 35rem;
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-actions-links {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}

.t2-btn {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.15rem;
  border: 1px solid var(--t2-ink);
  border-radius: 999px;
  background: var(--t2-ink);
  color: #fff;
  font-size: var(--t2-type-body);
  font-weight: 700;
  text-decoration: none;
}

.t2-btn.is-secondary {
  border-color: rgba(18, 20, 17, .2);
  background: transparent;
  color: var(--t2-ink);
}

.t2-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.t2-checklist article {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 1.15rem;
  min-height: 12rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid rgba(var(--t2-tone-rgb), .2);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, .78);
}

.t2-checklist article > span {
  grid-row: 1 / span 3;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 1rem;
  background: var(--t2-tone-soft);
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
}

.t2-checklist h2 {
  margin: 0 0 .65rem;
  font-size: var(--t2-type-heading);
  line-height: 1.4;
}

.t2-checklist p {
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-checklist ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: #383c37;
}

.t2-checklist li {
  position: relative;
  margin-top: .42rem;
  padding-left: 1.15rem;
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-checklist li::before {
  position: absolute;
  top: .62em;
  left: 0;
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--t2-tone);
  content: "";
}

.t2-compact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(var(--t2-tone-rgb), .22);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, .8);
}

.t2-compact-grid article {
  min-height: 14rem;
  padding: clamp(1.4rem, 3vw, 2.3rem);
}

.t2-compact-grid article + article {
  border-left: 1px solid var(--t2-line);
}

.t2-compact-grid span {
  color: var(--t2-tone);
  font-size: var(--t2-type-meta);
  font-weight: 700;
}

.t2-compact-grid h2 {
  margin: 1.1rem 0 .7rem;
  font-size: var(--t2-type-heading);
  line-height: 1.4;
  letter-spacing: -.025em;
}

.t2-compact-grid p {
  margin: 0;
  color: var(--t2-muted);
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

.t2-compact-grid ul {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: #343934;
  font-size: var(--t2-type-body);
  line-height: var(--t2-leading-body);
}

/* 手机：沿墙、过道与单个物体的三个视差分镜。 */
#phone .t2-hero h1 {
  max-width: 9ch;
}

#phone .t2-facts {
  grid-template-columns: minmax(6.5rem, .8fr) minmax(10.5rem, 1.25fr) minmax(9rem, 1fr);
}

#phone .t2-facts li,
#phone .t2-facts li + li {
  padding-right: .65rem;
  padding-left: .65rem;
  justify-items: center;
  text-align: center;
}

#phone .t2-facts b {
  font-size: 1rem;
  letter-spacing: -.015em;
  white-space: nowrap;
}

#phone .t2-hero-copy > p strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--t2-tone);
  font-size: var(--t2-type-heading);
}

@media (min-width: 721px) {
  #phone .phone-overlap-copy {
    white-space: nowrap;
  }
}

@media (min-width: 981px) {
  #phone .phone-motion-intro {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  #phone .phone-motion-intro > p {
    max-width: none;
    white-space: nowrap;
  }

  #phone .phone-upload-summary {
    max-width: none;
    font-size: clamp(.95rem, 1.1vw, var(--t2-type-body));
    white-space: nowrap;
  }
}

#phone .phone-capture-demo .t2-demo-visual {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .98), rgba(232, 244, 251, .9) 68%, rgba(205, 227, 240, .88));
}

#phone .phone-capture-demo .t2-demo-visual::after {
  background: linear-gradient(180deg, transparent 72%, rgba(29, 64, 84, .22) 100%);
}

#phone .phone-route-stage {
  display: grid;
  box-sizing: border-box;
  place-items: center;
  padding: .75rem .75rem 5.6rem;
}

#phone .phone-capture-map {
  width: 100%;
  max-width: 60rem;
  height: auto;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

#phone .phone-capture-scene {
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s ease;
}

#phone .phone-capture-scene.is-active {
  visibility: visible;
  opacity: 1;
}

#phone .phone-scene-plate {
  fill: url(#phone-scene-gradient);
  stroke: rgba(var(--t2-tone-rgb), .24);
  stroke-width: 2;
}

#phone .phone-scene-eyebrow {
  fill: var(--t2-tone);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 2px;
}

#phone .phone-scene-title {
  fill: var(--t2-ink);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.5px;
}

#phone .phone-orientation-chip rect {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(var(--t2-tone-rgb), .28);
  stroke-width: 1.5;
}

#phone .phone-orientation-chip text {
  fill: var(--t2-tone);
  font-size: 15px;
  font-weight: 750;
}

#phone .phone-floor,
#phone .phone-corridor,
#phone .phone-object-floor {
  fill: url(#phone-floor-gradient);
  stroke: rgba(var(--t2-tone-rgb), .25);
  stroke-width: 2;
}

#phone .phone-wall {
  fill: none;
  stroke: #78909c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 14;
}

#phone .phone-furniture rect,
#phone .phone-furniture circle {
  fill: #d6e2e8;
  stroke: #8ea4af;
  stroke-width: 2;
}

#phone .phone-route-line {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 11;
}

#phone .phone-route-high {
  stroke: #1f6f9d;
}

#phone .phone-route-mid {
  stroke: #5b91b3;
}

#phone .phone-route-low {
  stroke: #8bb6cf;
}

#phone .phone-motion-marker {
  pointer-events: none;
  color: var(--t2-tone);
}

#phone .phone-motion-marker.is-high {
  color: #1f6f9d;
}

#phone .phone-motion-marker.is-mid {
  color: #5b91b3;
}

#phone .phone-motion-marker.is-low {
  color: #759fba;
}

#phone .phone-view-cone {
  fill: #1f6f9d;
  fill-opacity: .11;
  stroke: #1f6f9d;
  stroke-opacity: .62;
  stroke-width: 1.3;
}

#phone .phone-moving-body {
  fill: #17262f;
  stroke: #fff;
  stroke-width: 1.7;
}

#phone .phone-moving-lens {
  fill: #a8dcf5;
  stroke: #fff;
  stroke-width: .8;
}

#phone .phone-motion-tag rect {
  fill: rgba(255, 255, 255, .96);
  stroke: currentColor;
  stroke-width: 1.2;
}

#phone .phone-motion-tag text {
  fill: currentColor;
  font-size: 11px;
  font-weight: 800;
}

#phone .phone-sight-line {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-dasharray: 7 7;
  opacity: .72;
}

#phone .phone-route-marker,
#phone .phone-height-item {
  transform-box: fill-box;
  transform-origin: center;
}

#phone .phone-route-key text,
#phone .phone-lane-label text {
  fill: #50636e;
  font-size: 15px;
  font-weight: 700;
}

#phone .phone-route-key .is-high,
#phone .phone-lane-label .is-high {
  fill: #1f6f9d;
}

#phone .phone-route-key .is-mid,
#phone .phone-lane-label .is-mid {
  fill: #5b91b3;
}

#phone .phone-route-key .is-low,
#phone .phone-lane-label .is-low {
  fill: #8bb6cf;
}

#phone .phone-height-card {
  fill: rgba(255, 255, 255, .82);
  stroke: rgba(var(--t2-tone-rgb), .22);
  stroke-width: 2;
}

#phone .phone-height-title {
  fill: var(--t2-tone);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .5px;
}

#phone .phone-person circle {
  fill: #cbd9e0;
  stroke: #546a76;
  stroke-width: 3;
}

#phone .phone-person path {
  fill: none;
  stroke: #546a76;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 8;
}

#phone .phone-height-item {
  color: var(--t2-tone);
}

#phone .phone-height-item.is-high {
  color: #1f6f9d;
}

#phone .phone-height-item.is-mid {
  color: #5b91b3;
}

#phone .phone-height-item.is-low {
  color: #759fba;
}

#phone .phone-height-diagram {
  color: var(--t2-tone);
}

#phone .phone-height-diagram.is-high {
  color: #1f6f9d;
}

#phone .phone-height-diagram.is-mid {
  color: #5b91b3;
}

#phone .phone-height-diagram.is-low {
  color: #759fba;
}

#phone .phone-height-diagram > text:not(.phone-map-note) {
  fill: currentColor;
  font-size: 18px;
  font-weight: 800;
}

#phone .phone-height-diagram .phone-angle-target {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 1.5;
}

#phone .phone-height-item > text:not(.phone-map-note) {
  fill: currentColor;
  font-size: 17px;
  font-weight: 750;
}

#phone .phone-angle-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 6 6;
}

#phone .phone-map-note {
  fill: #5d6b73;
  font-size: 15px;
  font-weight: 600;
}

#phone .phone-corridor-wall,
#phone .phone-door-marks path {
  fill: none;
  stroke: #7d929d;
  stroke-linecap: round;
}

#phone .phone-corridor-wall {
  stroke-width: 14;
}

#phone .phone-door-marks path {
  stroke-width: 5;
}

#phone .phone-demo-note-chip rect,
#phone .phone-object-label rect {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(var(--t2-tone-rgb), .22);
  stroke-width: 1.5;
}

#phone .phone-demo-note-chip text,
#phone .phone-object-label text {
  fill: var(--t2-tone);
  font-size: 15px;
  font-weight: 750;
}

#phone .phone-object-floor {
  fill: rgba(255, 255, 255, .72);
}

#phone .phone-object ellipse {
  fill: #bccfd9;
  stroke: #5d7581;
  stroke-width: 3;
}

#phone .phone-object path {
  fill: none;
  stroke: #5d7581;
  stroke-linecap: round;
  stroke-width: 9;
}

#phone .phone-object-height-guide > path {
  fill: none;
  stroke: rgba(var(--t2-tone-rgb), .28);
  stroke-width: 2;
  stroke-dasharray: 5 6;
}

#phone .phone-object-height-guide text {
  fill: #50636e;
  font-size: 14px;
  font-weight: 700;
}

#phone .phone-object-height-guide .is-high {
  fill: #1f6f9d;
}

#phone .phone-object-height-guide .is-mid {
  fill: #5b91b3;
}

#phone .phone-object-height-guide .is-low {
  fill: #8bb6cf;
}

#phone .phone-capture-rules {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

#phone .phone-critical-note {
  border-left-color: #c84c4c;
  background: rgba(200, 76, 76, .08);
}

#phone .phone-critical-note strong {
  color: #a93535;
}

/* 全景无人机：三种室外场景使用独立 SVG 路线分镜。 */
#panoramic-drone .t2-hero h1 {
  max-width: 14ch;
}

@media (min-width: 981px) {
  #panoramic-drone .t2-section-intro {
    grid-template-columns: minmax(22rem, .72fr) max-content;
  }

  #panoramic-drone .t2-section-intro > p {
    max-width: none;
    white-space: nowrap;
  }
}

#panoramic-drone .t2-hero-copy > p strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--t2-tone);
  font-size: var(--t2-type-heading);
}

#panoramic-drone .drone-route-demo .t2-demo-visual {
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, .96), rgba(234, 243, 238, .86) 66%, rgba(215, 231, 221, .82));
}

#panoramic-drone .drone-route-demo .t2-demo-visual::after {
  background: linear-gradient(180deg, transparent 72%, rgba(34, 62, 50, .22) 100%);
}

#panoramic-drone .drone-route-stage {
  display: grid;
  box-sizing: border-box;
  place-items: center;
  padding: 1rem 1rem 5.5rem;
}

#panoramic-drone .drone-route-map {
  width: 100%;
  max-width: 60rem;
  height: auto;
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

#panoramic-drone .drone-route-scene {
  visibility: hidden;
  opacity: 0;
  transition: opacity .35s ease, visibility .35s ease;
}

#panoramic-drone .drone-route-scene.is-active {
  visibility: visible;
  opacity: 1;
}

#panoramic-drone .drone-scene-plate {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(var(--t2-tone-rgb), .22);
  stroke-width: 2;
}

#panoramic-drone .drone-scene-eyebrow {
  fill: var(--t2-tone);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: 2px;
}

#panoramic-drone .drone-scene-title {
  fill: var(--t2-ink);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.5px;
}

#panoramic-drone .drone-map-label {
  fill: var(--t2-tone);
  font-size: 17px;
  font-weight: 700;
}

#panoramic-drone .drone-map-note {
  fill: #59645d;
  font-size: 17px;
  font-weight: 600;
}

#panoramic-drone .drone-note-chip {
  fill: rgba(255, 255, 255, .9);
  stroke: rgba(var(--t2-tone-rgb), .16);
  stroke-width: 1.5;
}

#panoramic-drone .drone-ground,
#panoramic-drone .drone-square-ground {
  fill: url(#drone-ground-gradient);
  stroke: rgba(var(--t2-tone-rgb), .4);
  stroke-width: 2;
}

#panoramic-drone .drone-coverage-ring {
  fill: rgba(var(--t2-tone-rgb), .12);
  stroke: rgba(var(--t2-tone-rgb), .35);
  stroke-width: 2;
}

#panoramic-drone .drone-route-line,
#panoramic-drone .drone-height-line {
  fill: none;
  stroke: var(--t2-tone);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 13 12;
}

#panoramic-drone .drone-route-secondary {
  stroke: #739987;
  stroke-width: 4;
  stroke-dasharray: 8 12;
}

#panoramic-drone .drone-height-line {
  stroke-width: 4;
  stroke-dasharray: 7 10;
}

#panoramic-drone .drone-building-front {
  fill: url(#drone-building-front);
  stroke: #607168;
  stroke-width: 2;
}

#panoramic-drone .drone-building-side {
  fill: #c3d2c9;
  stroke: #607168;
  stroke-width: 2;
}

#panoramic-drone .drone-building-roof {
  fill: #edf3ef;
  stroke: #607168;
  stroke-width: 2;
}

#panoramic-drone .drone-windows rect {
  fill: #8eb0a0;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1.5;
}

#panoramic-drone .drone-landmarks circle {
  fill: #7fa28f;
  stroke: #fff;
  stroke-width: 4;
}

#panoramic-drone .drone-icon {
  transform-box: fill-box;
  transform-origin: center;
}

#panoramic-drone .drone-icon path {
  fill: none;
  stroke: #26332d;
  stroke-width: 5;
  stroke-linecap: round;
}

#panoramic-drone .drone-icon circle {
  fill: #fff;
  stroke: var(--t2-tone);
  stroke-width: 4;
}

#panoramic-drone .drone-outdoor-note {
  border-color: rgba(var(--t2-tone-rgb), .34);
  background: rgba(var(--t2-tone-rgb), .08);
}

@media (prefers-reduced-motion: reduce) {
  #panoramic-drone .drone-route-scene {
    transition: none;
  }
}

@media (max-width: 980px) {
  .t2-hero,
  .t2-section-intro,
  .t2-check {
    grid-template-columns: 1fr;
  }

  .t2-hero h1 {
    max-width: 15ch;
  }

  .t2-demo {
    grid-template-columns: 1fr;
  }

  .t2-demo-visual {
    min-height: 28rem;
    border-right: 0;
    border-bottom: 1px solid var(--t2-line);
  }

  #panoramic-drone .drone-route-stage {
    padding: .5rem .5rem 5.5rem;
  }

  .t2-demo-controls {
    margin-top: 1rem;
  }
}

@media (max-width: 720px) {
  .tutorial-v2 {
    --t2-type-display: clamp(2.75rem, 12vw, 3.35rem);
    --t2-type-section: clamp(2rem, 8vw, 2.2rem);
    --t2-type-heading: 1.12rem;
    --t2-type-body: 1rem;
    --t2-type-meta: .8125rem;
  }

  .t2-shell {
    width: min(100% - 28px, 1240px);
  }

  .t2-page {
    padding-top: 3.2rem;
  }

  .t2-hero {
    gap: 1.8rem;
    padding-bottom: 3.2rem;
  }

  .t2-hero h1 {
    max-width: none;
    line-height: .98;
  }

  .t2-facts {
    grid-template-columns: 1fr;
  }

  .t2-facts li,
  .t2-facts li + li {
    padding: .85rem 0;
    border-left: 0;
    border-bottom: 1px solid rgba(var(--t2-tone-rgb), .18);
  }

  .t2-section-intro {
    gap: 1rem;
  }

  .t2-demo {
    min-height: 0;
    border-radius: 1.35rem;
  }

  .t2-demo-visual {
    min-height: 20rem;
  }

  .t2-demo-panels {
    inset: .65rem .65rem 5.3rem;
    gap: .3rem;
  }

  .t2-demo-panel {
    border-radius: .8rem;
  }

  .t2-demo-panel > span {
    top: .5rem;
    left: .5rem;
    width: 1.7rem;
    height: 1.7rem;
  }

  #panoramic-camera .t2-demo-media img {
    object-fit: cover;
    object-position: left center;
    transition: object-position .4s ease;
  }

  #panoramic-camera .t2-demo[data-active-step="2"] .t2-demo-media img {
    object-position: right center;
  }

  #panoramic-camera .t2-demo-panels {
    display: none;
  }

  #panoramic-camera .pano-position-demo .t2-demo-visual,
  #panoramic-camera .pano-position-phase {
    min-height: 0;
  }

  #panoramic-camera .pano-position-phase {
    grid-template-columns: 1fr;
  }

  #panoramic-camera .pano-pose-card {
    grid-template-rows: 24rem auto;
    border-right: 0;
    border-bottom: 1px solid var(--t2-line);
  }

  #panoramic-camera .pano-direction-card {
    min-height: 23rem;
    padding: 1.35rem;
  }

  #panoramic-camera .pano-direction-card svg {
    max-width: 19rem;
    margin-top: .25rem;
  }

  .t2-demo-caption {
    right: .8rem;
    bottom: .8rem;
    left: .8rem;
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }

  .t2-demo-side {
    padding: .85rem;
  }

  .t2-demo-step {
    padding: .95rem;
  }

  .t2-execution {
    padding-top: 4rem;
  }

  .t2-execution-grid,
  .t2-check-list,
  .t2-checklist {
    grid-template-columns: 1fr;
  }

  #panoramic-camera .t2-execution-grid {
    grid-template-columns: 1fr;
  }

  .t2-execution article,
  .t2-execution article + article {
    padding: 1.5rem 0;
    border-left: 0;
    border-bottom: 1px solid var(--t2-line);
  }

  .t2-check {
    padding: 1.3rem;
  }

  .t2-check > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;
  }

  .t2-check h2 {
    font-size: var(--t2-type-section);
    line-height: 1.05;
  }

  .t2-check-list li {
    min-height: 0;
  }

  .t2-note,
  .t2-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .t2-actions-links,
  .t2-btn {
    width: 100%;
  }

  .t2-checklist article {
    grid-template-columns: 2.7rem 1fr;
    min-height: 0;
    padding: 1.3rem;
  }

  .t2-checklist article > span {
    width: 2.7rem;
    height: 2.7rem;
  }

  .t2-compact-grid {
    grid-template-columns: 1fr;
  }

  .t2-compact-grid article {
    min-height: 0;
  }

  .t2-compact-grid article + article {
    border-top: 1px solid var(--t2-line);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .t2-demo-step,
  .t2-demo-visual .t2-phase {
    transition: none !important;
  }
}

/* 无人机：依据 Varjo Teleport 航拍方法重做单栋建筑与大面积场景交互。 */
#drone .drone-settings-grid{
  margin-top:clamp(2rem,4vw,3.2rem);
}
#drone .drone-building-section,
#drone .drone-area-section{
  padding-top:clamp(5rem,8vw,8rem);
}
#drone .drone-building-demo .t2-demo-visual,
#drone .drone-grid-demo .t2-demo-visual{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,255,255,.98),rgba(231,241,245,.9) 62%,rgba(208,226,233,.88));
}
#drone .drone-building-demo .t2-demo-visual::after,
#drone .drone-grid-demo .t2-demo-visual::after{
  background:linear-gradient(180deg,transparent 72%,rgba(38,70,86,.2) 100%);
}
#drone .drone-building-map,
#drone .drone-grid-map{
  box-sizing:border-box;
  width:min(100%,56rem);
  padding:1rem 1rem 5.2rem;
  font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;
}
#drone .drone-building-ground{
  stroke:rgba(var(--t2-tone-rgb),.24);
  stroke-width:2;
}
#drone .drone-flight-route,
#drone .drone-grid-route{
  fill:none;
  stroke:var(--t2-tone);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:13 13;
}
#drone .drone-loop-low{stroke:#286d91}
#drone .drone-loop-mid{stroke:#4d8ead}
#drone .drone-loop-high{stroke:#78adc2}
#drone .drone-cascade-route{stroke:#326f88;stroke-width:6}
#drone .drone-view-cone{
  fill:rgba(42,113,151,.12);
  stroke:rgba(42,113,151,.46);
  stroke-width:2;
}
#drone .drone-view-ray{
  fill:none;
  stroke:rgba(42,113,151,.75);
  stroke-width:3;
  stroke-dasharray:8 9;
}
#drone .drone-map-label{
  fill:#244f65;
  font-size:18px;
  font-weight:760;
  letter-spacing:.4px;
}
#drone .drone-map-meta{
  fill:#58717d;
  font-size:15px;
  font-weight:600;
}
#drone .t2-demo-visual .t2-phase{
  visibility:hidden;
  opacity:0;
  transition:opacity .35s ease,visibility .35s ease;
}
#drone .t2-demo-visual .t2-phase.is-active{
  visibility:visible;
  opacity:1;
}
#drone .drone-building-demo .t2-demo-step{
  padding:.82rem .95rem;
}
#drone .drone-building-demo .t2-demo-step b{
  font-size:calc(var(--t2-type-heading) - 1px);
}
#drone .drone-site-boundary{
  stroke:rgba(var(--t2-tone-rgb),.28);
  stroke-width:3;
}
#drone .drone-site-blocks rect{
  fill:rgba(255,255,255,.82);
  stroke:rgba(44,79,96,.3);
  stroke-width:2;
}
#drone .drone-grid-length{stroke:#2f789d}
#drone .drone-grid-cross{stroke:#6ba2b9}
#drone .drone-grid-route.is-complete{
  opacity:.28;
  stroke-dasharray:8 12;
}
#drone .drone-camera-angle rect{
  fill:rgba(255,255,255,.94);
  stroke:rgba(var(--t2-tone-rgb),.28);
  stroke-width:2;
}
#drone .drone-camera-angle text{
  fill:#315b70;
  font-size:14px;
  font-weight:750;
  text-anchor:middle;
}

@media (max-width:720px){
  #drone .drone-building-map,
  #drone .drone-grid-map{
    width:100%;
    max-width:100%;
    padding:.5rem .25rem 4.8rem;
    transform:none;
  }
  #drone .drone-map-label,
  #drone .drone-map-meta{display:none}
  #drone .drone-building-demo .t2-demo-step{
    padding:1rem;
  }
}

/* 无人机三维演示 v2：真实高度、路径跟随、镜头视锥与取景反馈。 */
#drone .drone-ground-plane{
  stroke:rgba(50,91,110,.22);
  stroke-width:2;
}
#drone .drone-height-ruler path{
  fill:none;
  stroke:rgba(45,84,103,.4);
  stroke-width:2;
  stroke-dasharray:5 6;
}
#drone .drone-height-ruler text{
  fill:#53717f;
  font-size:14px;
  font-weight:700;
}
#drone .drone-altitude-plane{
  fill:rgba(72,145,177,.035);
  stroke-width:2;
  stroke-dasharray:5 9;
}
#drone .drone-altitude-plane.is-low{stroke:rgba(35,108,145,.34)}
#drone .drone-altitude-plane.is-mid{stroke:rgba(76,144,174,.32)}
#drone .drone-altitude-plane.is-high{stroke:rgba(123,177,196,.38)}
#drone .drone-altitude-plane.is-active{fill:rgba(61,135,166,.08);stroke-width:3}
#drone .drone-altitude-plane.is-reference{fill:transparent;stroke:rgba(49,95,117,.3)}
#drone .drone-orbit-back,
#drone .drone-orbit-front,
#drone .drone-cascade{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:7;
  stroke-dasharray:12 13;
}
#drone .drone-orbit-back{opacity:.38;stroke-width:5}
#drone .drone-orbit-back.is-low,
#drone .drone-orbit-front.is-low{stroke:#236c91}
#drone .drone-orbit-back.is-mid,
#drone .drone-orbit-front.is-mid{stroke:#4c90ae}
#drone .drone-orbit-back.is-high,
#drone .drone-orbit-front.is-high{stroke:#7bb1c4}
#drone .drone-cascade{stroke:#315f75;stroke-width:6}
#drone .drone-cascade.is-back{opacity:.35}
#drone .drone-follow-path{
  fill:none;
  stroke:none;
  pointer-events:none;
}
#drone [data-drone-follow]{
  pointer-events:none;
}
#drone .drone-camera-direction{
  fill:none;
  stroke:rgba(46,119,151,.72);
  stroke-width:2.4;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
#drone [data-follow-camera]{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.85));
  transform-origin:0 0;
}
#drone .drone-flight-shadow{
  fill:rgba(29,56,70,.18);
}
#drone .drone-altitude-tether{
  stroke:rgba(36,75,94,.35);
  stroke-width:2;
  stroke-dasharray:4 5;
}
#drone .drone-shutter-ring{
  fill:none;
  stroke:#fff;
  stroke-width:3;
  opacity:.76;
  transform-box:fill-box;
  transform-origin:center;
}
#drone .drone-shutter-ring.is-coral{stroke:#f7d3c9}
#drone .drone-connect-level{
  fill:none;
  stroke:#315f75;
  stroke-width:2;
  stroke-dasharray:7 8;
}
#drone .drone-connect-label{
  fill:#315f75;
  font-size:16px;
  font-weight:750;
  text-anchor:middle;
}
#drone .drone-cascade-progress rect{
  fill:rgba(255,255,255,.9);
  stroke:rgba(49,95,117,.26);
  stroke-width:1.5;
}
#drone .drone-cascade-progress text{
  fill:#315f75;
  font-size:14px;
  font-weight:800;
  text-anchor:middle;
}
#drone .drone-subject-frame{
  fill:none;
  stroke:#2e7698;
  stroke-width:3;
  stroke-linecap:round;
  opacity:.72;
}
#drone .drone-pov{
  position:absolute;
  z-index:3;
  top:1.1rem;
  right:1.1rem;
  width:14rem;
  padding:.7rem;
  border:1px solid rgba(var(--t2-tone-rgb),.25);
  border-radius:1.15rem;
  background:rgba(255,255,255,.92);
  box-shadow:0 16px 40px rgba(28,58,73,.14);
  backdrop-filter:blur(16px);
}
#drone .drone-pov-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.5rem;
  color:#315f75;
}
#drone .drone-pov-head span{font:800 9px/1.2 "DM Mono",monospace;letter-spacing:.12em}
#drone .drone-pov-head b{font-size:9px}
#drone .drone-pov-frame{display:none}
#drone .drone-building-demo[data-active-step="1"] [data-pov-step="1"],
#drone .drone-building-demo[data-active-step="2"] [data-pov-step="2"],
#drone .drone-building-demo[data-active-step="3"] [data-pov-step="3"],
#drone .drone-building-demo[data-active-step="4"] [data-pov-step="4"],
#drone .drone-building-demo[data-active-step="5"] [data-pov-step="5"]{display:block}
#drone .drone-pov-scene{
  position:relative;
  height:7.2rem;
  overflow:hidden;
  border-radius:.75rem;
  background:linear-gradient(180deg,#b9dbe8 0 54%,#d8e1dc 54% 100%);
}
#drone .drone-pov-scene.is-high{background:linear-gradient(180deg,#afd4e4 0 45%,#d4dfdb 45% 100%)}
#drone .drone-pov-scene.is-facade{background:linear-gradient(180deg,#c2dde7 0 68%,#d9e2dd 68% 100%)}
#drone .drone-pov-horizon{position:absolute;right:0;bottom:45%;left:0;height:1px;background:#ffffffaa}
#drone .drone-pov-building{
  position:absolute;
  left:50%;
  bottom:6%;
  width:var(--pov-w);
  height:var(--pov-h);
  transform:translateX(-50%);
  border:2px solid #345d70;
  background:linear-gradient(135deg,#edf4f6 0 50%,#9fbdca 50% 100%);
  clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%);
  box-shadow:0 8px 18px #345d7030;
}
#drone .drone-pov-reticle{
  position:absolute;
  inset:10%;
  border:1px solid rgba(255,255,255,.92);
  border-radius:.35rem;
  box-shadow:0 0 0 1px #173d5148;
}
#drone .drone-pov-reticle::before,
#drone .drone-pov-reticle::after{position:absolute;width:.8rem;height:.8rem;border-color:#fff;border-style:solid;content:""}
#drone .drone-pov-reticle::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
#drone .drone-pov-reticle::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
#drone .drone-pov-frame p{
  margin:.45rem 0 0;
  color:#466574;
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}

#drone .drone-site-surface{
  stroke:rgba(49,91,111,.32);
  stroke-width:3;
}
#drone .drone-site-floor-grid path{
  fill:none;
  stroke:rgba(71,108,125,.12);
  stroke-width:2;
}
#drone .drone-flight-plane{
  stroke:rgba(46,123,160,.34);
  stroke-width:2;
  stroke-dasharray:8 10;
}
#drone .drone-site-buildings polygon{
  stroke:#567888;
  stroke-width:2;
  stroke-linejoin:round;
}
#drone .drone-site-buildings g polygon:nth-child(1){fill:#edf4f6}
#drone .drone-site-buildings g polygon:nth-child(2){fill:#c8dae1}
#drone .drone-site-buildings g polygon:nth-child(3){fill:#91afbd}
#drone .drone-grid-route,
#drone .drone-grid-route-shadow{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#drone .drone-grid-route{
  stroke-width:8;
  stroke-dasharray:14 12;
  transform:translateY(-58px);
}
#drone .drone-grid-route-shadow{
  transform:none;
  stroke:rgba(33,76,96,.16);
  stroke-width:12;
  filter:blur(1px);
}
#drone .drone-grid-route-shadow.is-cross{stroke:rgba(151,82,62,.15)}
#drone .drone-grid-length{stroke:#287ba4}
#drone .drone-grid-cross{stroke:#d7775c}
#drone .drone-grid-route.is-complete{
  stroke:#287ba4;
  opacity:.32;
  stroke-width:6;
}
#drone .drone-photo-footprint{
  stroke-width:2;
  stroke-dasharray:5 6;
}
#drone .drone-photo-footprint.is-blue{fill:rgba(40,123,164,.08);stroke:rgba(40,123,164,.34)}
#drone .drone-photo-footprint.is-coral{fill:rgba(215,119,92,.08);stroke:rgba(215,119,92,.36)}
#drone .drone-live-footprint{
  stroke-width:2.4;
  stroke-dasharray:7 7;
  transform-box:fill-box;
  transform-origin:center;
}
#drone .drone-live-footprint.is-blue{fill:rgba(40,123,164,.1);stroke:rgba(40,123,164,.48)}
#drone .drone-live-footprint.is-coral{fill:rgba(215,119,92,.1);stroke:rgba(215,119,92,.5)}
#drone [data-follow-footprint]{opacity:.82;pointer-events:none}
#drone .drone-overlap-label rect{
  fill:rgba(255,255,255,.9);
  stroke:rgba(40,123,164,.26);
  stroke-width:2;
}
#drone .drone-overlap-label text{
  fill:#2f6178;
  font-size:15px;
  font-weight:750;
  text-anchor:middle;
}
#drone .drone-turn-label path{
  fill:none;
  stroke:#d7775c;
  stroke-width:4;
  stroke-linecap:round;
}
#drone .drone-turn-label text{
  fill:#a4533e;
  font-size:16px;
  font-weight:800;
}
#drone .drone-grid-legend{
  position:absolute;
  z-index:3;
  top:1rem;
  left:1rem;
  display:flex;
  gap:.45rem;
  padding:.55rem .65rem;
  border:1px solid rgba(var(--t2-tone-rgb),.2);
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:#385e70;
  font-size:10px;
  font-weight:750;
  backdrop-filter:blur(12px);
}
#drone .drone-grid-legend span{display:flex;align-items:center;gap:.35rem}
#drone .drone-grid-legend i{width:.75rem;height:.18rem;border-radius:99px;background:#287ba4}
#drone .drone-grid-legend span+span i{background:#d7775c}
#drone .drone-angle-inset{
  position:absolute;
  z-index:3;
  top:1rem;
  right:1rem;
  display:grid;
  grid-template-columns:6.2rem 1fr;
  gap:.65rem;
  width:15.5rem;
  padding:.6rem .7rem;
  border:1px solid rgba(var(--t2-tone-rgb),.22);
  border-radius:1rem;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 32px rgba(28,58,73,.12);
  color:#365e72;
  font-size:10px;
  font-weight:700;
  line-height:1.45;
  backdrop-filter:blur(14px);
}
#drone .drone-angle-diagram{position:relative;height:3.5rem}
#drone .drone-angle-aircraft{position:absolute;top:.15rem;left:.1rem;color:#225f7e;font-size:1.3rem}
#drone .drone-angle-ground{position:absolute;right:0;bottom:.35rem;left:0;height:2px;background:#7f9eaa}
#drone .drone-angle-building{position:absolute;right:.1rem;bottom:.45rem;width:1.6rem;height:1.3rem;background:#9bb9c5;clip-path:polygon(50% 0,100% 30%,100% 100%,0 100%,0 30%)}
#drone .drone-angle-ray{position:absolute;top:1rem;left:1.2rem;width:4.8rem;height:2px;transform:rotate(24deg);transform-origin:left;background:#d7775c}
#drone .drone-angle-diagram b{position:absolute;top:1.35rem;left:2.7rem;color:#ad5b44;font-size:10px}

@media (max-width:720px){
  #drone .drone-height-ruler{display:none}
  #drone .drone-pov{
    top:.65rem;
    right:.65rem;
    width:9.2rem;
    padding:.45rem;
  }
  #drone .drone-pov-head b{display:none}
  #drone .drone-pov-scene{height:4.8rem}
  #drone .drone-pov-frame p{font-size:8px}
  #drone .drone-grid-legend{top:.55rem;left:.55rem;display:grid;border-radius:.8rem}
  #drone .drone-angle-inset{
    top:.55rem;
    right:.55rem;
    grid-template-columns:4.2rem 1fr;
    width:10.5rem;
    padding:.45rem;
    font-size:8px;
  }
  #drone .drone-angle-diagram{height:2.6rem}
  #drone .drone-angle-ray{width:3.4rem}
  #drone .drone-overlap-label{display:none}
}

/* 无人机摄影测量校准版：二维正射、三维倾斜、单体建筑表面覆盖。 */
#drone .drone-settings-grid article p{
  max-width:none;
  margin:0;
  color:var(--t2-muted);
  font-size:clamp(1rem,1.1vw,1.075rem);
  line-height:1.72;
  text-wrap:pretty;
}
#drone .drone-settings-grid article{
  min-width:0;
  padding:clamp(1.5rem,2.3vw,1.9rem) clamp(1.25rem,2.2vw,2rem) clamp(1.65rem,2.5vw,2.1rem);
}
#drone .drone-settings-grid article:first-child{
  padding-left:0;
}
#drone .drone-settings-grid article:last-child{
  padding-right:0;
}
#drone .drone-settings-grid article+article{
  border-left:1px solid var(--t2-line);
}
#drone .drone-settings-grid article>span{
  display:block;
  color:var(--t2-tone);
  font-size:.78rem;
  font-weight:750;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
#drone .drone-settings-grid article h3{
  margin:.55rem 0 .65rem;
  font-size:clamp(1.15rem,1.45vw,1.35rem);
  line-height:1.25;
  letter-spacing:-.025em;
}
@media (max-width:980px){
  #drone .drone-settings-grid{
    grid-template-columns:1fr;
  }
  #drone .drone-settings-grid article,
  #drone .drone-settings-grid article:first-child,
  #drone .drone-settings-grid article:last-child{
    padding:1.35rem 0 1.5rem;
  }
  #drone .drone-settings-grid article+article{
    border-top:1px solid var(--t2-line);
    border-left:0;
  }
  #drone .drone-settings-grid article h3{
    font-size:1.2rem;
  }
  #drone .drone-settings-grid article p{
    font-size:1rem;
  }
}
#drone .t2-check-list{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#drone .t2-demo-step:focus-visible,
#drone .t2-demo-toggle:focus-visible{
  outline:3px solid rgba(47,120,157,.36);
  outline-offset:3px;
}
#drone .t2-demo-toggle{
  min-height:44px;
}
#drone .drone-height-ruler{
  transition:opacity .2s ease;
}
#drone .drone-building-demo[data-active-step="2"] .drone-height-ruler{
  opacity:0;
}

#drone .drone-roof-route,
#drone .drone-facade-scan,
#drone .drone-terrain-route{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:11 11;
}
#drone .drone-roof-route{
  stroke:#2f789d;
  stroke-width:6;
}
#drone .drone-facade-scan{
  stroke:#315f75;
  stroke-width:6;
}
#drone .drone-facade-scan.is-side{
  stroke:#5f8798;
}
#drone .drone-orbit-back.is-optional,
#drone .drone-orbit-front.is-optional{
  opacity:.58;
  stroke-dasharray:6 13;
}
#drone .drone-camera-frustum{
  fill:rgba(46,119,151,.1);
  stroke:rgba(46,119,151,.56);
  stroke-width:2;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#drone .drone-mode-label rect,
#drone .drone-layer-note rect,
#drone .drone-oblique-label rect,
#drone .drone-terrain-label rect{
  fill:rgba(255,255,255,.92);
  stroke:rgba(47,120,157,.24);
  stroke-width:1.5;
}
#drone .drone-mode-label text,
#drone .drone-layer-note text,
#drone .drone-oblique-label text,
#drone .drone-terrain-label text{
  fill:#315f75;
  font-size:14px;
  font-weight:800;
  text-anchor:middle;
}
#drone .drone-layer-note rect{
  stroke:rgba(123,177,196,.42);
}
#drone .drone-layer-note text{
  fill:#426d7f;
}
#drone .drone-pov-scene.is-nadir{
  background:linear-gradient(135deg,#d6e2df 0 48%,#c8d8d5 48% 100%);
}
#drone .drone-pov-scene.is-nadir .drone-pov-horizon{
  display:none;
}
#drone .drone-pov-scene.is-nadir .drone-pov-building{
  bottom:18%;
  height:58%;
  clip-path:polygon(50% 0,100% 30%,50% 62%,0 30%);
  background:linear-gradient(145deg,#f4f8f9 0 48%,#a8c2cc 48% 100%);
}
#drone .drone-pov-scene.is-oblique{
  background:linear-gradient(180deg,#b6d8e6 0 50%,#d5e0dc 50% 100%);
}
#drone .drone-pov-reticle{
  border-style:dashed;
  opacity:.84;
}
#drone .drone-pov-reticle::before,
#drone .drone-pov-reticle::after{
  display:none;
}

#drone .drone-shutter-ring.is-green{
  stroke:#cce9df;
}
#drone .drone-live-footprint.is-green{
  fill:rgba(63,139,120,.1);
  stroke:rgba(63,139,120,.52);
}
#drone .drone-oblique-footprints .drone-live-footprint{
  opacity:.72;
}
#drone .drone-oblique-label rect{
  stroke:rgba(215,119,92,.28);
}
#drone .drone-oblique-label text{
  fill:#8e4d3d;
}

#drone .drone-terrain-card{
  fill:rgba(250,252,252,.94);
  stroke:rgba(63,139,120,.22);
  stroke-width:2;
  filter:drop-shadow(0 18px 24px rgba(28,58,73,.12));
}
#drone .drone-terrain-ground{
  fill:rgba(155,188,176,.48);
  stroke:#668f80;
  stroke-width:3;
}
#drone .drone-terrain-route{
  stroke:#3f8b78;
  stroke-width:7;
}
#drone .drone-agl-line{
  fill:none;
  stroke:rgba(63,139,120,.44);
  stroke-width:2;
  stroke-dasharray:5 6;
}
#drone .drone-terrain-label rect{
  stroke:rgba(63,139,120,.28);
}
#drone .drone-terrain-label text{
  fill:#3f7466;
}

#drone .drone-grid-legend span:nth-child(3) i{
  background:#3f8b78;
}
#drone .drone-angle-inset{
  display:block;
  width:13.5rem;
  min-height:4.5rem;
  padding:.75rem .85rem;
}
#drone .drone-angle-frame{
  display:none;
  grid-template-columns:4.8rem 1fr;
  gap:.7rem;
  align-items:center;
}
#drone .drone-grid-demo[data-active-step="1"] [data-angle-step="1"],
#drone .drone-grid-demo[data-active-step="2"] [data-angle-step="2"],
#drone .drone-grid-demo[data-active-step="3"] [data-angle-step="3"]{
  display:grid;
}
#drone .drone-angle-frame strong{
  color:#245f7c;
  font-size:1rem;
  line-height:1.1;
  letter-spacing:-.02em;
  text-align:center;
}
#drone .drone-angle-frame span{
  color:#486b7b;
  font-size:10px;
  font-weight:750;
  line-height:1.45;
}

@media (max-width:720px){
  #drone .t2-check-list{
    grid-template-columns:1fr;
  }
  #drone .drone-mode-label,
  #drone .drone-layer-note,
  #drone .drone-oblique-label,
  #drone .drone-terrain-label{
    display:none;
  }
  #drone .drone-angle-inset{
    display:block;
    width:9.4rem;
    min-height:3.5rem;
    padding:.45rem .55rem;
  }
  #drone .drone-angle-frame{
    grid-template-columns:3.35rem 1fr;
    gap:.35rem;
  }
  #drone .drone-angle-frame strong{
    font-size:.72rem;
  }
  #drone .drone-angle-frame span{
    font-size:9px;
    line-height:1.35;
  }
  #drone .drone-pov-head span{
    font-size:9px;
  }
  #drone .drone-pov-frame p{
    font-size:10px;
    line-height:1.3;
  }
  #drone .drone-overlap-label,
  #drone .drone-oblique-label{
    display:none;
  }
}

@media (max-width:360px){
  #drone .drone-pov{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  #drone [data-route-motion],
  #drone [data-marker-motion],
  #drone [data-drone-follow]{
    animation:none!important;
    transition:none!important;
  }
}