/* Страницы «Для кого»: шесть небольших рабочих столов. */
.audience-hero { padding: clamp(44px, 6vw, 82px) 0 64px; background: radial-gradient(ellipse at 90% 40%, var(--glow), var(--glow-0) 65%); }
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.audience-grid > * { min-width: 0; }
.audience-copy h1 { margin-top: 20px; font-size: clamp(2.4rem, 4.5vw, 4rem); }
.audience-copy .lead { max-width: 40ch; }
.audience-copy .joke { font-size: 1.5rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 25px; font-size: 13px; color: var(--muted); }
.crumbs a { color: inherit; }
.scene-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.scene-label b { letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.audience-desk { position: relative; padding: 43px 34px 35px; border-radius: var(--r-l); background: repeating-linear-gradient(97deg, transparent 0 42px, color-mix(in srgb, var(--desk-2) 50%, transparent) 43px 44px), var(--desk); border: 1px solid var(--line); box-shadow: var(--shadow-2); isolation: isolate; }
.audience-desk::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 90% 0%, var(--glow), transparent 60%); pointer-events: none; }
.desk-note { position: relative; width: fit-content; max-width: 90%; padding: 9px 16px; margin: -57px 0 20px -8px; background: var(--note); color: var(--note-ink); font: 600 1.2rem/1.15 var(--hand); transform: rotate(-3deg); box-shadow: var(--shadow-1); }
.scene-paper { position: relative; background: var(--sheet); color: var(--on-sheet); box-shadow: 4px 5px 0 var(--sheet-edge), var(--shadow-2); border-radius: 3px 6px 9px 3px; transform: rotate(1deg); padding: 22px 0 12px; transition: transform .5s var(--ease-io); }
.scene-paper.is-turning { animation: audience-turn .6s var(--ease-io); transform-origin: 0 50%; }
@keyframes audience-turn { 45% { transform: perspective(1000px) rotateY(-12deg) rotate(-1deg); opacity: .6; } }
.paper-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 24px 5px; padding-bottom: 9px; border-bottom: 1px solid var(--sheet-edge); font: 700 10px/1.5 var(--font); text-transform: uppercase; letter-spacing: .09em; }
.paper-top span { font-weight: 500; text-align: right; }
.paper-body { position: relative; }
.paper-body canvas { width: 100%; height: 278px; }
.paper-fallback { min-height: 278px; padding: 22px 26px; color: var(--pen-ink); font: 500 1.6rem/1.5 var(--hand); white-space: pre-wrap; overflow-wrap: anywhere; }
.paper-ready .paper-fallback { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.paper-body canvas[hidden] { display: none; }
.paper-bottom { margin: 0 24px; padding-top: 10px; border-top: 1px solid var(--sheet-edge); display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--on-sheet-muted); font-size: 11px; }
.paper-bottom .hand { color: var(--pen-ink); font-size: 1.15rem; }
.scene-pen { position: absolute; left: 0; top: 0; z-index: 3; width: 140px; height: 14px; pointer-events: none; transform-origin: 0 50%; filter: drop-shadow(0 7px 4px color-mix(in srgb, var(--on-sheet) 25%, transparent)); }
.scene-pen::before { content: ''; display: block; position: absolute; inset: 0; background: linear-gradient(var(--accent-2), var(--pen-ink)); border-radius: 0 6px 6px 0; clip-path: polygon(0 50%, 13% 10%, 89% 10%, 89% 0, 100% 0, 100% 100%, 89% 100%, 89% 90%, 13% 90%); }
.scene-pen::after { content: ''; position: absolute; left: 0; top: 5px; width: 17px; height: 4px; background: var(--on-sheet); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.scene-controls { margin-top: 24px; }
.scene-controls .field { margin-bottom: 16px; }
.scene-controls label, .scene-controls .label { font-size: 14px; }
.scene-controls .input { min-height: 44px; font-size: 15px; }
.scene-controls .chips { gap: 6px; }
.scene-controls .chip { min-height: 42px; padding: 6px 13px; font-size: 13px; }
.scene-controls .range { height: 30px; }
.scene-controls .field:last-child { margin-bottom: 0; }
.scene-caption { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.demo-status { display: block; min-height: 1.5em; font: 600 1.1rem/1.3 var(--hand); color: var(--accent); margin-top: 12px; }
.scene-tools { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.scene-tools .inks { gap: 12px; padding: 5px; }
.scene-tools .ink { width: 26px; height: 26px; }
.scene-tools .link-btn { font-size: 13px; }
.scene-study .scene-paper { background-image: linear-gradient(90deg, transparent 15px, var(--margin-red) 15px 16px, transparent 16px); }
.scene-study .scene-paper::before { content: ''; position: absolute; left: 10%; right: 10%; top: -11px; height: 19px; background: repeating-linear-gradient(90deg, transparent 0 22px, var(--muted) 22px 26px, transparent 26px 32px); border-radius: 4px; }
.scene-letters .scene-paper { padding: 31px 13px 24px; border-radius: 3px; transform: rotate(-2deg); }
.scene-letters .scene-paper::after { content: ''; position: absolute; inset: 11px; border: 1px solid var(--sheet-edge); pointer-events: none; }
.scene-letters .paper-top { border: 0; }
.scene-letters .paper-body canvas { height: 265px; }
.scene-flower { width: 42px; height: 42px; position: absolute; bottom: 70px; right: 22px; stroke: var(--pen-ink); fill: none; opacity: .5; }
.scene-envelope { position: absolute; right: 24px; bottom: 17px; width: 112px; height: 64px; border: 1px solid var(--sheet-edge); background: var(--sheet); transform: rotate(8deg); z-index: -1; box-shadow: var(--shadow-1); }
.scene-envelope::after { content: ''; position: absolute; inset: 0; background: linear-gradient(31deg, transparent 49%, var(--sheet-edge) 50%, transparent 51%), linear-gradient(-31deg, transparent 49%, var(--sheet-edge) 50%, transparent 51%); }
.scene-copybooks .paper-body { background: repeating-linear-gradient(100deg, transparent 0 23px, color-mix(in srgb, var(--rule) 40%, transparent) 23px 24px); }
.copy-guide { position: absolute; inset: auto 24px 24px; height: 30px; border-bottom: 1px solid var(--rule); pointer-events: none; }
.form-label { position: absolute; left: 26px; font: 700 9px/1 var(--font); letter-spacing: .08em; color: var(--on-sheet-muted); text-transform: uppercase; pointer-events: none; }
.form-label.f-name { top: 16px; }.form-label.f-date { top: 100px; }.form-label.f-text { top: 156px; }
.form-line { position: absolute; left: 26px; right: 20px; height: 1px; background: var(--rule); pointer-events: none; }
.form-line.f-name { top: 73px; }.form-line.f-date { top: 129px; }.form-line.f-text { top: 213px; }
.form-anchor { position: absolute; top: -8px; left: -8px; width: 18px; height: 18px; border: 1px solid var(--stamp); border-radius: 50%; }
.form-anchor::before, .form-anchor::after { content: ''; position: absolute; background: var(--stamp); }
.form-anchor::before { width: 24px; height: 1px; left: -4px; top: 8px; }.form-anchor::after { width: 1px; height: 24px; top: -4px; left: 8px; }
.scene-business .scene-paper { transform: rotate(-2deg); }
.scene-business .scene-paper::before, .scene-business .scene-paper::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sheet); border: 1px solid var(--sheet-edge); border-radius: inherit; }
.scene-business .scene-paper::before { transform: rotate(5deg) translate(2px, 4px); }.scene-business .scene-paper::after { transform: rotate(2deg) translate(-3px, 6px); }
.series-count { position: absolute; right: -12px; top: -15px; padding: 9px 14px; background: var(--note-3); color: var(--note-3-ink); font: 600 1.2rem/1 var(--hand); transform: rotate(5deg); box-shadow: var(--shadow-1); }
.scene-hard .scene-paper { transform: none; }
.scene-hard .audience-desk { padding-top: 34px; }
.scene-hard .desk-note { margin-top: -46px; background: var(--note-3); color: var(--note-3-ink); }
.scene-hard .chip { min-height: 46px; }
.workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; list-style: none; margin: 42px 0 0; counter-reset: steps; }
.workflow li { counter-increment: steps; }
.workflow li::before { content: '0' counter(steps); display: block; color: var(--accent); font: 600 2.4rem/1 var(--hand); margin-bottom: 20px; }
.workflow p { margin-top: 13px; color: var(--muted); font-size: 16px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); margin-top: 42px; align-items: start; }
.detail-grid h3 { margin-bottom: 14px; }
.detail-grid p + p { margin-top: 16px; }
.detail-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.detail-list li { padding-left: 25px; position: relative; color: var(--muted); }
.detail-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-family: var(--hand); font-weight: 700; }
.detail-list b { display: block; color: var(--ink); margin-bottom: 3px; }
.audience-note { font: 600 1.7rem/1.25 var(--hand); color: var(--pen-ink); margin-bottom: 18px; }
.card.paper p { color: var(--on-sheet); }
.card.paper .more-link { color: var(--pen-ink); }
.family-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.family-links a { display: flex; align-items: center; gap: 9px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700; transition: background .25s, transform .3s var(--spring); }
.family-links a:hover { background: var(--accent-soft); transform: translateY(-3px); }
.family-links span { color: var(--accent); font: 600 1.6rem/1 var(--hand); }
.audience-end { text-align: center; padding: clamp(64px, 8vw, 100px) 0; background: var(--stage); }
.audience-end .lead { margin-inline: auto; max-width: 52ch; }
.audience-end h2 { max-width: 18ch; margin-inline: auto; }
.access-note { max-width: 72ch; margin: 24px auto 0; font-size: 13px; color: var(--muted); }
.audience-hard .footer .phrase-box { display: none; }
html:not(.js) .scene-controls, html:not(.js) .scene-tools { display: none; }
html:not(.js) .scene-forms .form-label, html:not(.js) .scene-forms .form-line { display: none; }
@media (max-width: 1000px) { .audience-grid { grid-template-columns: 1fr 1fr; gap: 32px; }.audience-copy h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); }.audience-desk { padding-inline: 22px; }.family-links { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .audience-grid { grid-template-columns: 1fr; gap: 52px; }.audience-copy { max-width: 580px; }.audience-copy h1 { font-size: clamp(2.4rem, 7vw, 3.5rem); }.audience-scene { max-width: 540px; width: 100%; margin-inline: auto; }.audience-hero { padding-bottom: 50px; }.workflow { grid-template-columns: 1fr; gap: 12px; }.workflow li { padding: 24px; }.workflow li::before { margin-bottom: 12px; }.detail-grid { grid-template-columns: 1fr; }.family-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .audience-desk { padding: 38px 16px 25px; }.desk-note { margin-top: -50px; font-size: 1.1rem; }.paper-top, .paper-bottom { margin-inline: 20px; }.scene-pen { width: 105px; }.family-links { grid-template-columns: 1fr; }.scene-label { font-size: 11px; }.scene-letters .scene-paper { padding-inline: 4px; }.audience-copy .fine { gap: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { .scene-paper.is-turning { animation: none; }.scene-pen { display: none; } }