.flow-nav { grid-template-columns: repeat(8,minmax(100px,1fr)); }

.line-hero { background-image: radial-gradient(circle at 86% 18%,rgba(20,132,194,.1),transparent 26%); }
.line-hero-visual { min-height: 440px; padding: 52px 42px; display: flex; flex-direction: column; justify-content: center; gap: 40px; border-radius: 30px; color: white; background: linear-gradient(145deg,#10283f,#173f5f); box-shadow: 0 28px 70px rgba(16,40,63,.24); transform: rotate(-1.5deg); }
.line-sample { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 18px; }
.line-sample b { font-size: 13px; letter-spacing: .02em; }
.line-sample i { display: block; width: 100%; height: 4px; background: #fff; }
.hidden-sample i { height: 3px; background: repeating-linear-gradient(90deg,#75c9f5 0 20px,transparent 20px 34px); }
.center-sample i { height: 3px; background: repeating-linear-gradient(90deg,#ffbb76 0 44px,transparent 44px 55px,#ffbb76 55px 59px,transparent 59px 70px); }
.phantom-sample i { height: 3px; background: repeating-linear-gradient(90deg,#8be0c0 0 40px,transparent 40px 50px,#8be0c0 50px 54px,transparent 54px 63px,#8be0c0 63px 67px,transparent 67px 78px); }

.line-palette-wrap { margin: 18px 0; padding: 14px; border: 1px solid #dce7ec; border-radius: 17px; background: #f7fafb; }
.line-palette-wrap > span { display: block; margin: 0 0 10px 3px; color: #587083; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.line-palette { display: grid; grid-template-columns: repeat(4,minmax(145px,1fr)); gap: 8px; }
.line-tool { min-height: 66px; padding: 9px 11px; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; border: 1px solid #d6e2e8; border-radius: 12px; color: #10283f; background: white; text-align: left; cursor: pointer; transition: border-color .18s,box-shadow .18s,transform .18s; }
.line-tool:hover { border-color: #8eb9d1; transform: translateY(-1px); }
.line-tool.active { border-color: #1484c2; box-shadow: 0 0 0 3px rgba(20,132,194,.12); background: #f3faff; }
.line-tool > i { display: block; width: 58px; height: 4px; }
.line-tool span { min-width: 0; }
.line-tool b,.line-tool small { display: block; }
.line-tool b { font-size: 11px; line-height: 1.25; }
.line-tool small { margin-top: 3px; color: #6d7f8e; font-size: 8px; line-height: 1.25; }

.line-tool > i.line-visible { height: 6px; background: #10283f; }
.line-tool > i.line-thin { height: 2px; background: #10283f; }
.line-tool > i.line-hidden { height: 3px; background: repeating-linear-gradient(90deg,#10283f 0 11px,transparent 11px 18px); }
.line-tool > i.line-center { height: 3px; background: repeating-linear-gradient(90deg,#10283f 0 22px,transparent 22px 28px,#10283f 28px 31px,transparent 31px 37px); }
.line-tool > i.line-cut { height: 6px; background: repeating-linear-gradient(90deg,#10283f 0 22px,transparent 22px 28px,#10283f 28px 32px,transparent 32px 38px); }
.line-tool > i.line-break { height: 10px; background: linear-gradient(135deg,transparent 42%,#10283f 43% 56%,transparent 57%) 0 0/12px 10px repeat-x; }
.line-tool > i.line-phantom { height: 3px; background: repeating-linear-gradient(90deg,#10283f 0 20px,transparent 20px 25px,#10283f 25px 28px,transparent 28px 33px,#10283f 33px 36px,transparent 36px 42px); }

.drawing-paper { fill: #fff; stroke: #ccd9df; stroke-width: 2; }
.construction-fill { fill: #edf5f8; stroke: none; }
.section-fill { fill: #f1f6f8; stroke: none; }
.bore-cue { fill: #fff; stroke: #a7bdc8; stroke-width: 2; stroke-dasharray: 4 6; }
.center-cue { fill: #1484c2; }
.cue-label { fill: #6a8190; font: 800 13px Manrope,sans-serif; text-anchor: middle; letter-spacing: .06em; }
.base-visible { fill: none; stroke: #10283f; stroke-width: 7; stroke-linejoin: round; }

.user-shape,.preview-shape,.ghost-shape,.demo-shape,.solution-user,.solution-target { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: round; }
.user-shape,.solution-user { stroke: #10283f; }
.preview-shape { stroke: #ef6a24; opacity: .9; }
.ghost-shape { stroke: #48a8d9; stroke-width: 3; stroke-dasharray: 8 7; opacity: .48; }
.demo-shape { stroke: #1484c2; stroke-dashoffset: 0!important; opacity: 0; animation: line-reveal .55s ease forwards!important; }
.solution-user { opacity: .72; }
.solution-target { stroke: #28a5d8; opacity: .85; }

.user-shape.line-visible,.preview-shape.line-visible,.demo-shape.line-visible,.solution-user.line-visible,.solution-target.line-visible { stroke-width: 8; stroke-dasharray: none; }
.user-shape.line-thin,.preview-shape.line-thin,.demo-shape.line-thin,.solution-user.line-thin,.solution-target.line-thin { stroke-width: 3; stroke-dasharray: none; }
.user-shape.line-hidden,.preview-shape.line-hidden,.demo-shape.line-hidden,.solution-user.line-hidden,.solution-target.line-hidden { stroke-width: 3; stroke-dasharray: 20 13; }
.user-shape.line-center,.preview-shape.line-center,.demo-shape.line-center,.solution-user.line-center,.solution-target.line-center { stroke-width: 3; stroke-dasharray: 42 11 4 11; }
.user-shape.line-cut,.preview-shape.line-cut,.demo-shape.line-cut,.solution-user.line-cut,.solution-target.line-cut { stroke-width: 8; stroke-dasharray: 42 11 5 11; }
.user-shape.line-break,.preview-shape.line-break,.demo-shape.line-break,.solution-user.line-break,.solution-target.line-break { stroke-width: 3; stroke-dasharray: none; }
.user-shape.line-phantom,.preview-shape.line-phantom,.demo-shape.line-phantom,.solution-user.line-phantom,.solution-target.line-phantom { stroke-width: 3; stroke-dasharray: 42 10 4 9 4 10; }
.line-guide { stroke-width: 3; stroke-dasharray: 8 7; }

.solution-legend { display: flex; gap: 20px; margin: 0 0 16px; color: #5e7381; font-size: 11px; font-weight: 700; }
.solution-legend span { display: inline-flex; align-items: center; gap: 7px; }
.solution-legend i { width: 28px; height: 4px; }
.student-mark { background: #10283f; }
.target-mark { background: #28a5d8; }

@keyframes line-reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width:1100px) {
  .flow-nav { grid-template-columns: repeat(8,112px); }
  .line-palette { grid-template-columns: repeat(2,minmax(160px,1fr)); }
}

@media (max-width:760px) {
  .line-hero-visual { order: 1; width: min(480px,100%); min-height: 300px; padding: 36px 25px; gap: 28px; }
  .line-sample { grid-template-columns: 105px 1fr; }
  .line-palette { grid-template-columns: 1fr; }
  .line-tool { min-height: 58px; grid-template-columns: 70px 1fr; }
  .line-tool > i { width: 70px; }
}