.trapezoid-area-page .tool-heading h1 { font-size: clamp(29px, 3.05vw, 41px); }
.trapezoid-area-lab .lab-grid { grid-template-columns: minmax(0, 2.25fr) minmax(420px, 1fr); }

.trapezoid-original-piece {
  fill: #72cbbb;
  stroke: #227e75;
}
.trapezoid-copy-piece {
  fill: url(#trapezoidCopyHatch);
  stroke: #a84f22;
  stroke-dasharray: 8 5;
}
.trapezoid-copy-wash { fill: rgba(245, 162, 93, .35); }
.trapezoid-copy-hatch {
  stroke: #dc7133;
  stroke-width: 4;
}
.trapezoid-final-outline {
  stroke: #1c645f;
  stroke-width: 3.2;
}
.shared-edge-line {
  stroke: #6c4a35;
  stroke-width: 2.2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}
.shared-edge-label,
.rotation-center-label,
.vertex-label,
.trapezoid-piece-label {
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 900;
}
.shared-edge-label { fill: #67442e; font-size: 11px; }
.rotation-center-label { fill: #77502f; font-size: 11px; }
.vertex-label { fill: #243a55; font-size: 15px; }
.trapezoid-piece-label { font-size: 13px; }
.original-label { fill: #176e67; }
.copy-label { fill: #9c461e; }
.rotation-ring {
  fill: rgba(255, 244, 214, .55);
  stroke: #c37a34;
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.rotation-center-dot {
  fill: #fff;
  stroke: #9d541f;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.lower-base-label { font-size: 13px; }
[data-tool-state="rotating"] .rotating-trapezoid-copy {
  filter: drop-shadow(0 10px 8px rgba(160, 76, 30, .22));
}
.trapezoid-area-lab .area-case strong { font-size: 11px; }
.trapezoid-area-lab .area-case span { font-size: 8px; }
.trapezoid-area-lab .proof-step { font-size: 9px; }
.trapezoid-area-lab .proof-step.formula-result { font-size: 10px; }

@media (max-width: 980px) {
  .trapezoid-area-lab .lab-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .trapezoid-area-page .tool-heading h1 { font-size: 24px; }
  .shared-edge-label,
  .rotation-center-label { font-size: 9px; }
  .trapezoid-piece-label { font-size: 10px; }
  .trapezoid-area-lab .proof-step { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-tool-state="rotating"] .rotating-trapezoid-copy { filter: none; }
}