/* Станок на столе и установка ручки. */
.machines-hero h1 { max-width: 12ch; }
.machine-stage { position: relative; width: 100%; aspect-ratio: 640 / 440; margin: 4px 0 20px; }
.machine-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.machine-frame { fill: var(--desk-2); stroke: var(--line); stroke-width: 2; }
.machine-rail { stroke: var(--muted); stroke-width: 8; stroke-linecap: round; }
.machine-gantry { fill: var(--muted); }
.machine-head { fill: var(--cover-2); stroke: var(--accent-2); stroke-width: 2; }
.machine-pen { fill: var(--pen-ink); }
.machine-metal { fill: var(--sheet-edge); }
.machine-paper { position: absolute; left: 17%; top: 21%; width: 66%; height: 61%; border-radius: 2px; background: var(--sheet); box-shadow: var(--shadow-1); }
.machine-paper canvas { width: 100%; height: 100%; }
.machine-sticker { position: absolute; right: 2%; bottom: 0; padding: 12px 18px; background: var(--note); color: var(--note-ink); font: 600 1.5rem var(--hand); transform: rotate(-3deg); box-shadow: var(--shadow-1); }
.machine-state { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 15px 0; color: var(--muted); font-size: 13px; }
.machine-state span:first-child { color: var(--accent); font-weight: 700; }
.machine-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.machine-controls .range { flex: 1 1 130px; }
.machine-table-wrap { margin-top: 38px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.machine-table { border-collapse: collapse; width: 100%; text-align: left; font-size: 15px; }
.machine-table th, .machine-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); vertical-align: top; }
.machine-table thead th { font-size: 20px; background: var(--stage); }
.machine-table tbody th { width: 24%; font-weight: 700; }
.machine-table tbody td { width: 38%; color: var(--muted); }
.machine-table tbody tr:last-child > * { border-bottom: 0; }
.machine-table strong { color: var(--ink); }
.machine-install { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; margin-top: 40px; }
.machine-install-art { min-height: 350px; position: relative; }
.machine-install-art svg { width: 100%; height: 350px; }
.install-holder { fill: var(--cover-2); stroke: var(--accent-2); stroke-width: 2; }
.install-line { stroke: var(--pen-ink); fill: none; stroke-width: 3; stroke-linecap: round; }
.install-sheet { fill: var(--sheet); stroke: var(--sheet-edge); stroke-width: 2; }
.install-callout { fill: var(--accent); font: 600 22px var(--hand); }
.install-label { fill: var(--muted); font: 500 13px var(--font); }
#installPen { transition: transform .8s var(--ease-io); }
.machine-install-art[data-step='0'] #installPen { transform: translateY(-65px); }
.machine-install-art[data-step='1'] #installPen { transform: translateY(-24px); }
.machine-install-art[data-step='2'] #installPen { transform: translateY(-8px); }
.machine-install-art[data-step='3'] #installPen { transform: none; }
.machine-install-art #installStroke { opacity: 0; transition: opacity .4s; }
.machine-install-art[data-step='3'] #installStroke { opacity: 1; }
.machine-install-tabs { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.machine-install-tabs button { display: grid; grid-template-columns: 36px 1fr; text-align: left; align-items: center; gap: 14px; padding: 16px 20px; width: 100%; border-radius: var(--r-s); background: var(--paper); border: 1px solid var(--line); cursor: pointer; }
.machine-install-tabs button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.machine-install-tabs b { color: var(--accent); font: 600 1.7rem var(--hand); }
.machine-install-tabs span { font-weight: 700; }
.machine-install-description { margin-top: 22px; min-height: 108px; color: var(--muted); }
.machine-checklist { display: grid; gap: 12px; margin-top: 26px; }
.machine-checklist label { display: flex; align-items: start; gap: 12px; border-bottom: 1px solid var(--line); padding: 0 0 14px; cursor: pointer; }
.machine-checklist input { width: 20px; height: 20px; flex: none; margin: 4px 0 0; accent-color: var(--accent); }
.machine-check-status { margin-top: 18px; color: var(--accent); font-weight: 700; }
.machine-buy .w1-card { background: var(--stage); }
.machine-buy h3 { margin-bottom: 15px; }
.machine-time { margin-top: 35px; }
.machine-time label { max-width: 35ch; }
.machine-time .hand { font-size: 2rem; }
.machine-result { padding: 30px; background: var(--sheet); color: var(--on-sheet); transform: rotate(1deg); box-shadow: var(--shadow-2); border-radius: 4px; }
.machine-result output { display: block; font: 600 clamp(2.5rem, 5vw, 4.5rem)/1 var(--hand); color: var(--pen-ink); margin: 20px 0; }
.machine-result p { font-size: 14px; color: var(--on-sheet-muted); }
@media (max-width: 700px) { .machine-install { grid-template-columns: 1fr; gap: 24px; } .machine-table th, .machine-table td { padding: 15px 10px; font-size: 13px; } .machine-table thead th { font-size: 16px; } .machine-install-art { min-height: 300px; } .machine-install-art svg { height: 300px; } }
@media (max-width: 650px) {
  .machine-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .machine-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machine-table tbody th { grid-column: 1 / -1; background: var(--stage); }
  .machine-table tbody th, .machine-table tbody td { display: block; width: auto; padding: 16px; font-size: 15px; }
  .machine-table tbody td::before { display: block; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
  .machine-table tbody td:nth-child(2)::before { content: 'Принтер'; }
  .machine-table tbody td:nth-child(3)::before { content: 'Плоттер'; }
  .machine-table tbody td:nth-child(2) { border-right: 1px solid var(--line); }
}