/* Путь от текста до листа. */
.how-route { display: flex; list-style: none; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; padding: 0; }
.how-route a { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; text-decoration: none; }
.how-route b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.how-route li + li::before { content: '→'; margin-right: 10px; color: var(--muted); }
.how-route li { display: flex; }
.how-hero-sheet { transform: rotate(2deg); padding: 30px 24px 28px 42px; min-height: 355px; }
.how-hero-sheet .hand { color: var(--pen-ink); font-size: clamp(25px, 3vw, 34px); line-height: 32px; margin-top: 27px; }
.how-hero-sheet .how-mark { text-decoration: line-through; text-decoration-thickness: 2px; }
.how-hero-sheet svg { width: 130px; height: 85px; color: var(--pen-ink); margin-top: 19px; }
.how-hero-sheet svg text { font-size: 12px; }
.how-hero-note { position: relative; margin: 26px 0 -4px auto; width: fit-content; max-width: 220px; background: var(--note); color: var(--note-ink); font: 600 1.45rem/1.15 var(--hand); padding: 17px 20px; transform: rotate(-3deg); box-shadow: var(--shadow-1); }
.how-step-head { display: flex; align-items: start; gap: 20px; margin-bottom: 36px; }
.how-step-head .w1-num { flex: none; padding-top: 8px; }
.how-editor { height: 214px; }
.how-editor + .hint { max-width: 46ch; }
.how-imports { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.how-preview { padding: 18px 0; min-height: 300px; transform: rotate(.8deg); }
.how-preview .w1-label { display: block; padding: 0 24px 0 42px; }
.how-preview canvas { width: 100%; height: 235px; }
.how-preview-pen { position: absolute; left: 0; top: 0; width: 110px; height: 14px; border-radius: 3px 8px 8px 3px; background: linear-gradient(var(--accent-2), var(--cover-2)); border-right: 20px solid var(--on-sheet); transform-origin: -18px 7px; pointer-events: none; box-shadow: var(--shadow-1); }
.how-preview-pen::before { content: ''; position: absolute; right: 100%; border: 7px solid transparent; border-right: 18px solid var(--sheet-edge); border-left: 0; }
.how-modes { margin-top: 25px; }
.how-mode-sheet { min-height: 300px; padding: 28px 32px; transform: rotate(-1deg); }
.how-mode-sheet[data-kind='letter'] { background-image: none; outline: 1px solid var(--margin-red); outline-offset: -16px; }
.how-mode-sheet[data-kind='copy'] { background-image: repeating-linear-gradient(110deg, transparent 0 27px, var(--rule) 27px 28px), repeating-linear-gradient(transparent 0 34px, var(--rule) 34px 35px); }
.how-mode-sheet[data-kind='own'] { background-image: repeating-linear-gradient(90deg, transparent 0 23px, var(--rule) 23px 24px), repeating-linear-gradient(transparent 0 23px, var(--rule) 23px 24px); }
.how-mode-sheet .hand { color: var(--pen-ink); font-size: 30px; line-height: 35px; margin-top: 30px; white-space: pre-line; }
.how-mode-sheet[data-kind='copy'] .hand { line-height: 44px; }
.how-mode-detail h3 { margin-top: 26px; }
.how-mode-detail p { color: var(--muted); margin-top: 12px; }
.how-output { margin-top: 38px; }
.how-output .w1-card { background: var(--stage); }
.how-output .w1-num { margin: 0 0 20px; }
.how-account { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.how-account .torn { display: block; padding: 34px; }
.how-account .torn p { margin-top: 18px; }
.how-account .torn .btn { margin-top: 22px; }
@media (max-width: 650px) { .how-account { grid-template-columns: 1fr; } .how-route { gap: 12px; } .how-route li + li::before { display: none; } .how-preview-pen { width: 80px; } }