.common-page { width: min(1200px, calc(100% - 40px)); }
.common-lab .visual-stage { padding: 16px; }
.common-lab .equation-band strong { font-size: clamp(22px, 2.4vw, 31px); }

.pair-scene {
  min-height: 312px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  padding: 14px 0;
}
.fraction-side {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #eadcc8;
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
}
.side-a { box-shadow: inset 0 4px 0 rgba(233, 132, 59, .64); }
.side-b { box-shadow: inset 0 4px 0 rgba(43, 152, 139, .64); }
.side-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.side-key {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
}
.side-a .side-key { color: #b8511f; background: #fff0df; }
.side-b .side-key { color: #226d65; background: #e4f5f1; }
.side-head strong { color: #253149; font-size: 25px; line-height: 1; }

.common-circle-holder {
  width: min(230px, 27vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(185, 127, 61, .4);
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  filter: drop-shadow(0 12px 15px rgba(123, 71, 24, .12));
}
.common-circle-svg {
  width: 92%;
  height: auto;
  display: block;
  overflow: visible;
  border-radius: 50%;
}
.common-sector {
  fill: var(--sector-color);
  stroke: rgba(87, 60, 36, .48);
  stroke-width: 1.2;
  transition: fill .3s ease, stroke .3s ease;
}
.common-ring { fill: none; stroke: rgba(79, 54, 31, .62); stroke-width: 2.5; }
.common-ornament {
  fill: none;
  stroke: rgba(255, 248, 219, .86);
  stroke-width: 1.7;
  stroke-dasharray: 3 4;
}
[data-tool-state="finding"] .common-circle-holder { animation: common-hold .38s ease; }
[data-tool-state="settled"] .common-circle-svg { animation: common-arrive .38s ease both; }

.side-area {
  margin: 0;
  color: #687485;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.side-area strong { color: #334055; }
.side-transform {
  min-height: 30px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid #e4ddd2;
  border-radius: 999px;
  color: #766a5d;
  background: #fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.side-a .side-transform { color: #914014; background: #fff4e7; }
.side-b .side-transform { color: #236d65; background: #edf9f6; }

.pair-case-button strong { font-size: 14px; white-space: nowrap; }
.common-meter {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 10px;
  border: 1px solid rgba(85, 116, 202, .24);
  border-radius: 13px;
  background: #f1f4ff;
}
.common-meter > span { color: #67738a; font-size: 10px; font-weight: 900; text-align: center; }
.common-value {
  display: block;
  color: #3d58ac;
  font-size: 30px;
  line-height: 1;
}
.common-copy { margin: 0; color: #5d6980; font-size: 10px; font-weight: 800; }
.common-lab .truth-note { margin-top: 10px; }

@keyframes common-hold {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes common-arrive {
  from { opacity: .45; transform: scale(.97); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .common-circle-holder { width: min(220px, 29vw); }
  .common-lab .control-deck { grid-template-columns: 150px minmax(0, 1fr); }
  .common-lab .common-meter { margin-top: 0; }
  .common-lab .truth-note { grid-column: 1 / -1; margin-top: 0; }
}

@media (max-width: 720px) {
  .common-circle-holder { width: min(205px, 38vw); }
  .pair-scene { min-height: 285px; gap: 10px; }
  .fraction-side { padding: 10px 7px; }
  .common-lab .control-deck { display: block; }
  .common-lab .common-meter,
  .common-lab .truth-note { margin-top: 12px; }
}

@media (max-width: 430px) {
  .common-page { width: calc(100% - 28px); }
  .common-lab .visual-stage { padding: 10px; }
  .common-lab .equation-band strong { font-size: 19px; }
  .pair-scene {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px 0;
  }
  .fraction-side {
    min-height: 158px;
    grid-template-columns: 146px minmax(0, 1fr);
    grid-template-areas:
      "circle head"
      "circle area"
      "circle transform";
    align-content: center;
    justify-items: stretch;
    gap: 5px 9px;
    padding: 8px;
    border-radius: 16px;
  }
  .common-circle-holder { grid-area: circle; width: 142px; }
  .side-head { grid-area: head; justify-content: flex-start; }
  .side-area { grid-area: area; text-align: left; }
  .side-transform { grid-area: transform; justify-self: start; white-space: normal; }
  .side-head strong { font-size: 22px; }
  .common-lab .invariant-line { grid-template-columns: 1fr; }
  .pair-case-button strong { font-size: 12px; }
  .pair-case-button span { font-size: 8px; }
  .common-meter { grid-template-columns: 66px minmax(0, 1fr); padding: 8px; }
  .common-value { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .common-circle-holder,
  .common-circle-svg { animation: none !important; }
}