.flow-nav { grid-template-columns: repeat(var(--flow-count,9),minmax(74px,1fr)); }
@media (min-width:1101px) { .flow-nav button { min-width: 0; } }
.construction-hero { background-image: radial-gradient(circle at 85% 18%,rgba(20,132,194,.12),transparent 31%); }
.construction-hero-visual { min-height: 430px; padding: 35px; border-radius: 30px; color: white; background: linear-gradient(145deg,#10283f,#173e59); box-shadow: 0 28px 70px rgba(16,40,63,.24); transform: rotate(-1.5deg); }
.construction-hero-visual > span { display: block; margin: 8px 0 18px; color: #8fd5f6; font: 700 12px "Roboto Mono",monospace; letter-spacing: .13em; }
.construction-hero-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.construction-hero-visual text { fill: #b9cedb; font: 700 15px "Roboto Mono",monospace; }
.hero-main-line { stroke: white; stroke-width: 5; }
.hero-arc { fill: none; stroke: #59b7de; stroke-width: 3; stroke-dasharray: 9 8; }
.hero-result { stroke: #ff9a5e; stroke-width: 5; }
.hero-square-outline { fill: none; }
.hero-point { fill: white; stroke: #ef6a24; stroke-width: 4; }

.construction-tool-wrap { margin: 0 0 14px; padding: 12px; border: 1px solid #d8e3e9; border-radius: 12px; background: #f6fafc; }
.construction-tool-wrap > span { display: block; margin-bottom: 8px; color: #617989; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.construction-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.construction-tool { min-width: 145px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #c8d9e2; border-radius: 10px; background: white; color: #31536b; cursor: pointer; text-align: left; }
.construction-tool:hover,.construction-tool.active { border-color: #ef6a24; background: #fff4ed; box-shadow: inset 0 0 0 1px rgba(239,106,36,.15); }
.construction-tool i { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e7f3f9; color: #1484c2; font: normal 800 16px Manrope,sans-serif; }
.construction-tool b,.construction-tool small { display: block; }
.construction-tool b { font-size: 12px; }.construction-tool small { margin-top: 2px; color: #718794; font-size: 9px; }

.construction-board { background-size: 20px 20px; }
.construction-paper { fill: #fff; stroke: #cfdae0; stroke-width: 2; }
.given-line { stroke: #10283f; stroke-width: 6; stroke-linecap: round; }
.given-circle { fill: none; stroke: #10283f; stroke-width: 5; }
.given-axis { stroke: #8ca3b0; stroke-width: 2.5; stroke-dasharray: 11 7; }
.given-hidden { stroke: #37546a; stroke-width: 3; stroke-dasharray: 10 7; }
.given-point { fill: #ef6a24; stroke: white; stroke-width: 3; }
.construction-label { fill: #37546a; font: 800 16px "Roboto Mono",monospace; }
.construction-note { fill: #758b99; font: 700 12px Manrope,sans-serif; letter-spacing: .03em; }
.dimension-value { fill: #0d77b7; font: 800 18px "Roboto Mono",monospace; paint-order: stroke; stroke: white; stroke-width: 5px; stroke-linejoin: round; }
.set-square { fill: rgba(89,183,222,.12); stroke: #6eb7d7; stroke-width: 3; }
.set-square-rail { stroke: #9ab2c0; stroke-width: 3; stroke-dasharray: 9 7; }

.user-shape,.preview-shape,.ghost-shape,.demo-shape,.solution-user,.solution-target { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.user-shape { stroke: #10283f; stroke-width: 5; }
.user-shape.role-construction { stroke: #4d748d; stroke-width: 3; }
.user-shape.role-hidden { stroke-width: 3; stroke-dasharray: 10 7; }
.user-shape.role-hatch { stroke: #8c4b82; stroke-width: 2.5; }
.user-shape.role-dimension,.user-shape.role-extension,.user-shape.role-leader,.user-shape.role-ordinate { stroke: #0d77b7; stroke-width: 2.75; }
.user-shape.role-extension { stroke-width: 2.25; }
.preview-shape { stroke: #ef6a24; stroke-width: 4; stroke-dasharray: 8 7; }
.preview-shape.role-hidden { stroke-width: 3; stroke-dasharray: 6 5; }
.preview-shape.role-hatch { stroke-width: 2.5; stroke-dasharray: 5 4; }
.preview-shape.role-dimension,.preview-shape.role-extension,.preview-shape.role-leader,.preview-shape.role-ordinate { stroke-width: 2.75; }
.ghost-shape { stroke: #40a4d2; stroke-width: 4; stroke-dasharray: 9 7; opacity: .5; }
.ghost-shape.role-hatch { stroke: #b365a5; stroke-width: 2.5; }
.ghost-shape.role-dimension,.ghost-shape.role-extension,.ghost-shape.role-leader,.ghost-shape.role-ordinate { stroke: #0d77b7; stroke-width: 2.75; }
.ghost-point { fill: #ef6a24; stroke: white; stroke-width: 3; }
.demo-shape { stroke: #1484c2; stroke-width: 5; stroke-dasharray: 1900; stroke-dashoffset: 1900; animation: construction-reveal .85s ease forwards; }
.demo-shape.role-construction { stroke-width: 3; }
.demo-shape.role-hidden { stroke-width: 3; stroke-dasharray: 10 7; stroke-dashoffset: 0; animation: none; }
.demo-shape.role-hatch { stroke: #8c4b82; stroke-width: 2.5; }
.demo-shape.role-dimension,.demo-shape.role-extension,.demo-shape.role-leader,.demo-shape.role-ordinate { stroke: #0d77b7; stroke-width: 2.75; }
.solution-user { stroke: #10283f; stroke-width: 5; opacity: .62; }
.solution-user.role-construction { stroke-width: 3; }
.solution-user.role-hidden { stroke-width: 3; stroke-dasharray: 10 7; }
.solution-user.role-hatch { stroke: #8c4b82; stroke-width: 2.5; }
.solution-user.role-dimension,.solution-user.role-extension,.solution-user.role-leader,.solution-user.role-ordinate { stroke: #0d77b7; stroke-width: 2.75; }
.solution-target { stroke: #24a4d4; stroke-width: 4; opacity: .92; stroke-dasharray: 8 6; }
.solution-target.role-construction { stroke-width: 3; }
.solution-target.role-hidden { stroke-width: 3; stroke-dasharray: 10 7; }
.solution-target.role-hatch { stroke: #b365a5; stroke-width: 2.5; }
.solution-target.role-dimension,.solution-target.role-extension,.solution-target.role-leader,.solution-target.role-ordinate { stroke: #24a4d4; stroke-width: 2.75; }
.role-ordinate circle { stroke: none; }
.user-shape.role-ordinate circle,.preview-shape.role-ordinate circle,.ghost-shape.role-ordinate circle,.demo-shape.role-ordinate circle { fill: #0d77b7; }
.solution-user.role-ordinate circle { fill: #0d77b7; }
.solution-target.role-ordinate circle { fill: #24a4d4; }
.shape-point.user-shape { fill: #10283f; stroke: white; stroke-width: 2; }
.shape-point.preview-shape { fill: #ef6a24; stroke: white; stroke-width: 2; }
.shape-point.ghost-shape { fill: #40a4d2; stroke: white; stroke-width: 2; opacity: .65; }
.shape-point.demo-shape { fill: #1484c2; stroke: white; stroke-width: 2; }
.shape-point.solution-user { fill: #10283f; stroke: white; stroke-width: 2; }
.shape-point.solution-target { fill: #24a4d4; stroke: white; stroke-width: 2; }
@keyframes construction-reveal { to { stroke-dashoffset: 0; } }

.solution-legend { display: flex; gap: 20px; margin-top: 18px; color: #617989; font-size: 11px; font-weight: 700; }
.solution-legend span { display: flex; align-items: center; gap: 8px; }
.solution-legend i { width: 32px; height: 0; border-top: 4px solid #10283f; }
.solution-legend .target-mark { border-top-color: #24a4d4; border-top-style: dashed; }

@media (max-width:1100px) { .flow-nav { grid-template-columns: repeat(var(--flow-count,9),112px); } }
@media (max-width:760px) {
  .construction-hero-visual { order: 1; width: min(480px,100%); min-height: 300px; padding: 25px; }
  .construction-tool { flex: 1 1 135px; min-width: 0; }
}