@import url('assets/tokens.css');
@font-face{font-family:Inter;src:url('assets/inter-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url('assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Literata;src:url('assets/literata-cyrillic.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Literata;src:url('assets/literata-latin.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--page-width:1168px;--chapter-space:clamp(56px,5.6vw,88px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px;touch-action:manipulation}body{margin:0;background:var(--color-canvas);color:var(--color-ink);font:16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,p,figure,blockquote{margin:0}h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;text-wrap:balance}p{text-wrap:pretty}a{color:inherit}button{font:inherit;color:inherit;cursor:pointer}a,button,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}svg{display:block;flex-shrink:0}[hidden]{display:none!important}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px}button{border:0}summary{cursor:pointer}.shell{width:min(100%,calc(var(--page-width) + 64px));margin-inline:auto;padding-inline:32px}.chapter{padding-block:var(--chapter-space)}.skip{position:fixed;z-index:10;top:-100px;left:8px;min-height:48px;padding:12px 20px;background:var(--color-canvas)}.skip:focus{top:8px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;padding-top:env(safe-area-inset-top)}.brand{display:flex;align-items:center;gap:10px;min-height:48px;text-decoration:none;font:500 26px/1 var(--font-display);letter-spacing:-.3px}.brand img{width:32px;height:32px;border-radius:8px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px 32px;align-items:center;padding-top:24px;padding-bottom:32px;min-height:700px}.hero h1{max-width:10em;font-size:clamp(40px,4.6vw,64px);line-height:1.14;letter-spacing:-1.1px}.hero-lead{max-width:29em;margin-top:28px;font-size:18px;color:var(--color-body)}.hero-method{max-width:31em;margin-top:20px;font-size:14px;color:var(--color-muted)}.hero-art{width:100%;height:590px;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;mix-blend-mode:darken}.next-chapter{display:inline-flex;align-items:center;gap:16px;min-height:48px;width:fit-content;grid-column:1/-1;margin-top:12px;text-decoration:none;font-size:14px;color:var(--color-muted)}.next-chapter svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.next-chapter:hover{text-decoration:underline;text-underline-offset:4px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;border:1px solid transparent;border-radius:999px;font:600 16px/1.4 var(--font-body);text-align:center;text-decoration:none;transition:background-color 180ms ease,border-color 180ms ease}.primary{background:var(--color-action);color:var(--color-on-action)}.primary:hover{background:var(--color-action-pressed)}.secondary{background:transparent;border-color:var(--color-hairline-strong);color:var(--color-ink)}.secondary:hover{background:var(--color-surface-card)}
.chapter-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:end;margin-bottom:40px}h2{font-size:clamp(32px,3.4vw,46px);line-height:1.22;letter-spacing:-.5px}.chapter-heading p{max-width:34em;color:var(--color-body)}.recognition{border-top:1px solid var(--color-hairline)}.quiet-question{margin-left:auto;width:fit-content;max-width:24em;padding-top:24px;font:400 26px/1.5 var(--font-display);color:var(--color-body)}
.example{background:var(--color-surface-soft)}.example .chapter-heading{margin-bottom:28px}.chapter-heading .example-disclosure{margin-top:16px;font-size:14px;color:var(--color-muted)}.case-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px}.case-nav a{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:72px;padding:14px 20px;border:2px solid var(--color-hairline-strong);border-radius:18px;text-align:center;text-decoration:none;font-size:15px;line-height:1.5;transition:background-color 180ms ease,border-color 180ms ease}.case-nav a[aria-selected="true"]{border-color:var(--color-action);background:var(--color-surface-card)}.case-nav a:hover{background:var(--color-surface-card)}.case{outline-offset:-4px}.case:not(:first-child){margin-top:36px}.js .case{margin-top:0}.scene{padding:32px;max-width:800px}.scene>p{font-size:13px;color:var(--color-muted);margin-bottom:12px}.scene h3{font-size:25px;line-height:1.45;text-wrap:pretty}.two-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.side{padding:32px}.side-title{display:flex;align-items:center;gap:14px;margin-bottom:20px;min-height:40px}.side-title svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.side h4,.step h4{font-size:26px;line-height:1.3}.side>p{max-width:21em;font:400 17px/1.65 var(--font-reading)}.light{background:var(--color-surface-card);color:var(--color-body-strong)}.dark{background:var(--color-surface-dark);color:var(--color-on-dark-body)}.dark h4{color:var(--color-on-dark)}.dark p{font-weight:380}.step{position:relative;isolation:isolate;overflow:hidden;padding:32px;background:var(--color-band);color:var(--color-on-band)}.step-copy{position:relative;z-index:1;max-width:800px}.step h4{margin-bottom:20px}.step p{max-width:34em;font:400 18px/1.65 var(--font-reading)}.sprout{position:absolute;z-index:-1;width:128px;height:160px;top:16px;right:-18px;fill:currentColor;color:var(--color-band-sprout)}.example-after{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;margin-top:32px}.example-after>p{max-width:44em;color:var(--color-body);font-size:15px}.dialogue{margin-top:32px;padding-top:32px;border-top:1px solid var(--color-hairline-strong);max-width:800px}.dialogue>.example-disclosure{color:var(--color-muted);font-size:14px;margin-bottom:24px}.dialogue blockquote{max-width:28em;padding:20px 24px;background:var(--color-surface-card);border-radius:18px;font:400 20px/1.5 var(--font-reading)}.reply{padding-top:24px}.reply span{font-size:13px;color:var(--color-muted)}.reply p{max-width:34em;font:400 18px/1.65 var(--font-reading);margin-top:12px}.dialogue-bottom{margin-top:24px;font-size:14px;color:var(--color-body)}
.continuation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}.continuation-copy>p{max-width:31em;margin-top:24px;color:var(--color-body)}.large-copy{font:400 25px/1.5 var(--font-reading)}.continuation-copy .muted{font-size:14px;color:var(--color-muted)}.reading-leaf{position:relative;max-width:440px;width:100%;margin-inline:auto;padding:40px;background:var(--color-surface-card)}.leaf-caption{font-size:13px;color:var(--color-muted);margin-bottom:20px}.reading-leaf h3{font-size:32px;line-height:1.25}.reading-contents{list-style:none;padding:0;margin:28px 0}.reading-contents li{padding-block:16px;border-bottom:1px solid var(--color-hairline-strong)}.reading-contents span{display:block;font:400 20px/1.4 var(--font-display)}.reading-contents small{display:block;margin-top:5px;font-size:13px;color:var(--color-muted)}.leaf-foot{font-size:14px;color:var(--color-body)}
.close-people{border-block:1px solid var(--color-hairline)}.close-people .chapter-heading{margin-bottom:8px}.together-art img{width:100%;height:auto;mix-blend-mode:darken}.together-caption{text-align:center;font:400 23px/1.5 var(--font-reading);max-width:30em;margin:8px auto 0}.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start}.method h2{font-size:clamp(36px,3.7vw,50px)}.method-copy p{max-width:33em;color:var(--color-body)}.method-copy p+p{margin-top:24px}.method-copy .large-copy{color:var(--color-ink)}
.start{background:var(--color-surface-soft)}.start-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;list-style:none;padding:0;margin:0}.step-number{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--color-hairline-strong);border-radius:50%;font:400 24px/1 var(--font-display);margin-bottom:24px}.start-steps h3{font-size:24px;margin-bottom:16px}.start-steps p{color:var(--color-body);font-size:15px}
.questions{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:80px}.faq-list details{border-top:1px solid var(--color-hairline)}.faq-list details:last-child{border-bottom:1px solid var(--color-hairline)}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-block:20px;cursor:pointer;font-size:16px;font-weight:500;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'+';font-size:24px;font-weight:400;flex-shrink:0}.faq-list details[open] summary::after{content:'−'}.faq-list details p{padding-bottom:24px;max-width:38em;color:var(--color-body);font-size:15px}.invitation{text-align:center;padding-top:16px}.invitation>img{width:64px;height:64px;object-fit:cover;border-radius:16px;margin:0 auto 28px}.invitation h2{font-size:clamp(34px,4vw,52px)}.invitation>p{max-width:34em;margin:24px auto 0;color:var(--color-body)}.invitation .button{margin-top:28px}.invitation .invitation-note{font-size:13px;color:var(--color-muted);margin-top:16px}.login-link{display:inline-flex;align-items:center;min-height:48px;margin-top:20px;font-size:14px;text-underline-offset:4px}.site-footer{display:flex;align-items:center;flex-wrap:wrap;gap:24px;min-height:128px;padding-block:28px max(28px,env(safe-area-inset-bottom));border-top:1px solid var(--color-hairline)}.site-footer>p{margin-left:auto;font-size:14px;color:var(--color-body)}.site-footer>a:last-child{display:flex;align-items:center;min-height:48px;font-size:14px;color:var(--color-muted);text-underline-offset:4px}
@media(max-width:1023px){.hero h1{font-size:48px}.hero-art{height:500px}.hero{min-height:650px}.chapter-heading{gap:32px}.continuation,.method,.questions{gap:40px}.reading-leaf{padding:32px}.start-steps{gap:28px}.example-after{grid-template-columns:1fr;gap:20px}.example-after .button{width:fit-content}}
@media(max-width:767px){.shell{padding-inline:24px}.site-header{min-height:76px;gap:12px}.brand{font-size:22px;gap:8px}.brand img{width:24px;height:24px;border-radius:6px}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:24px;padding-bottom:32px;gap:0}.hero h1{font-size:38px;line-height:1.15;letter-spacing:-.7px;max-width:10.5em}.hero-lead{font-size:17px;margin-top:22px}.hero-method{margin-top:16px;font-size:14px}.hero-art{height:260px;margin-top:24px;align-self:center;max-width:480px}.hero-art img{object-fit:cover}.next-chapter{margin-top:12px;font-size:13px}.chapter-heading{grid-template-columns:1fr;gap:24px;margin-bottom:28px}h2{font-size:32px;line-height:1.25}.quiet-question{font-size:23px;margin-left:0;padding-top:12px}.case-nav{gap:8px;margin-bottom:24px}.case-nav a{font-size:14px;min-height:72px;padding:12px 8px;line-height:1.45;overflow-wrap:normal}.example-book{margin-inline:-24px}.scene{padding:28px 24px}.scene h3{font-size:23px}.two-sides{grid-template-columns:1fr}.side{padding:28px 24px}.side-title{margin-bottom:16px}.side h4,.step h4{font-size:24px}.side>p{max-width:21em}.step{padding:28px 24px}.step p{font-size:17px;max-width:21em}.example-after{margin-top:28px}.example-after .button{width:100%}.dialogue blockquote{font-size:19px}.reply p{font-size:17px}.continuation{grid-template-columns:1fr;gap:40px}.large-copy{font-size:23px}.reading-leaf{padding:32px 28px}.reading-leaf h3{font-size:30px}.together-art{margin-inline:-24px}.together-art img{width:100%}.together-caption{font-size:21px;max-width:20em;margin-top:16px}.method{grid-template-columns:1fr;gap:28px}.method h2{font-size:36px}.start-steps{grid-template-columns:1fr;gap:32px}.start-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px 20px}.step-number{grid-row:1/3;margin:0}.start-steps h3{margin:0;font-size:23px}.start-steps p{grid-column:2}.questions{grid-template-columns:1fr;gap:28px}.faq-list summary{min-height:64px;font-size:15px}.invitation{padding-top:0}.invitation h2{font-size:36px}.invitation .button{width:100%}.site-footer{gap:12px 24px}.site-footer>p{margin-left:0}.site-footer>a:last-child{width:100%}}
@media(max-width:379px){.brand{font-size:21px;gap:7px}.hero h1{font-size:35px}.hero-art{height:280px}.case-nav a{font-size:14px}}
.reading-details{margin-top:24px}.reading-details summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:16px;font-size:14px;list-style:none}.reading-details summary::-webkit-details-marker{display:none}.reading-details summary::after{content:'+';font-size:24px}.reading-details[open] summary::after{content:'−'}.reading-details .reading-contents{margin:16px 0 0}.reading-details .reading-contents li{padding-block:12px}.reading-details .reading-contents span{font-size:18px}.example-entry{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:14px}.example-entry a{display:inline-flex;align-items:center;min-height:48px;text-underline-offset:4px}.example-entry span{color:var(--color-muted)}
.example-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;margin-top:24px}.example-actions>div>p{font-size:13px;color:var(--color-muted);margin-top:12px}.text-action{display:inline-flex;align-items:center;min-height:48px;min-width:48px;padding:12px 0;background:transparent;border:0;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-align:left}.reading-leaf{padding:24px 28px}.reading-leaf .reading-details{margin-top:0}.reading-leaf summary{font-size:17px;font-weight:500}.reading-leaf .leaf-caption{margin:16px 0 0}
@media(max-width:767px){.hero-art{margin-top:12px}.hero-art img{transform:scale(1.25);transform-origin:center 40%}.example-actions{display:block}.example-actions .primary{width:100%}.text-action{margin-top:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* ── Лист примера: одна страница книги (вариант S2, раунд 2) ─────────────────────────────────────────────
   Слова Артёма: «везде плавные линии, переходы, всё нежное, а этот блок квадратный и цвета выпрыгивают».
   «Ситуация», «Сила», «Тень» и «Первый шаг» лежат на одном скруглённом листе с тенью --shadow-sheet и перетекают
   друг в друга мягкими краями, как бумажный переход над разделом и волна подвала. «Ситуация» спускается на стороны
   волной, «Первый шаг» поднимается волной; по краю каждой волны идут три тонкие линии цвета --color-hairline-strong,
   как у переходов сайта. На широком экране «Сила» и «Тень» разделены дугой — граница света и тени на монете.
   «Тень» песочная, на тон глубже «Силы», с тёмным текстом; зелёный по-прежнему только у «Первого шага», но светлый.
   Края рисуют маски из встроенного SVG, цвет каждой волны — фон её части. Цвета --sheet-* — локальные токены лендинга.
   Контейнер .example-book прозрачен: бумагу, скругление и тень несёт сам лист .case, поэтому за скруглёнными углами
   и в зазорах между листами без JavaScript виден фон раздела, а не квадратная полоса бумаги.
   Блок перекрывает исходные правила выше (.case, .scene, .side, .light, .dark, .step, .sprout и мобильные поля),
   а прежний фон-полоса у .example-book убран из исходной строки. Контраст: «Сила» 12,4–13,3:1, «Тень» 8,9–11,8:1, «Первый шаг» 10,1:1. */
.example-book{
  --sheet-paper:var(--color-canvas);        /* «Ситуация»: лист той же бумаги, что и страница */
  --sheet-light-soft:#f3eee5;               /* «Сила», светлый край растяжки */
  --sheet-light:#ede6da;                    /* «Сила», глубокий край растяжки */
  --sheet-shade:#d7cec0;                    /* «Тень», светлый край: к «Силе» 1,26:1, заголовок 11,8:1 */
  --sheet-shade-deep:#cec4b5;               /* «Тень», глубокий край: текст 8,9:1 */
  --sheet-step:#e3eadf;                     /* «Первый шаг»: светлый шалфей */
  --sheet-step-ink:var(--color-band);       /* текст шага: 10,1:1 */
  --sheet-sprout:#c4d3c0;                   /* росток — декор */
  --sheet-line:var(--color-hairline-strong);/* линии вдоль волн, как у переходов сайта */
  --sheet-line-opacity:.32;                /* линия 1 px при .32 темнит фон не сильнее волосных линий подвала */
  --sheet-radius:28px;--sheet-wave:40px;--sheet-arc:30px;--sheet-pad:40px;
  --wave-box:calc(var(--sheet-wave) + 1px);
  --wave-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0V24C180 38 330 36 500 20S800 2 1000 16V0Z'/%3E%3C/svg%3E");
  --wave-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V14C200 0 380 4 540 18S820 38 1000 22V40Z'/%3E%3C/svg%3E");
  --wave-shade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20C160 6 330 2 500 14S820 36 1000 18V40Z'/%3E%3C/svg%3E");
  --arc-shade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 1000' preserveAspectRatio='none'%3E%3Cpath d='M40 0C40 250 0 300 0 500S40 750 40 1000Z'/%3E%3C/svg%3E");
  /* Линии: первая — по самому краю волны, 1 px; две слабее — эхом внутрь более светлой части (бумаги или шалфея). */
  --lines-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1000 52' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' d='M0 24C180 38 330 36 500 20S800 2 1000 16'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.8' opacity='.7' d='M0 19C180 33 330 31 500 15S800 -3 1000 11'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.7' opacity='.45' d='M0 14C180 28 330 26 500 10S800 -8 1000 6'/%3E%3C/svg%3E");
  --lines-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 52' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' d='M0 14C200 0 380 4 540 18S820 38 1000 22'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.8' opacity='.7' d='M0 19C200 5 380 9 540 23S820 43 1000 27'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.7' opacity='.45' d='M0 24C200 10 380 14 540 28S820 48 1000 32'/%3E%3C/svg%3E")}
.case{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--sheet-radius);background:var(--sheet-paper);box-shadow:var(--shadow-sheet);outline-offset:4px}
.scene{position:relative;z-index:2;max-width:none;padding:var(--sheet-pad) var(--sheet-pad) 24px;background:var(--sheet-paper)}.scene h3{max-width:736px}
.scene::after{content:'';position:absolute;left:0;right:0;top:calc(100% - 1px);height:var(--wave-box);background:var(--sheet-paper);-webkit-mask:var(--wave-down) 0 0/100% 100% no-repeat;mask:var(--wave-down) 0 0/100% 100% no-repeat}
.scene::before,.step::after{content:'';position:absolute;left:0;right:0;height:calc(var(--wave-box) * 1.3);background:var(--sheet-line);opacity:var(--sheet-line-opacity);pointer-events:none}
.scene::before{z-index:1;top:calc(100% - 1px - var(--wave-box) * .3);-webkit-mask:var(--lines-down) 0 0/100% 100% no-repeat;mask:var(--lines-down) 0 0/100% 100% no-repeat}
.two-sides{position:relative;z-index:1}
.side{position:relative;padding:calc(var(--sheet-wave) + 28px) var(--sheet-pad) calc(var(--sheet-wave) + 24px)}
.light{background:linear-gradient(90deg,var(--sheet-light-soft),var(--sheet-light)) var(--sheet-light);color:var(--color-body-strong)}.light h4{color:var(--color-ink)}
.dark{background:linear-gradient(90deg,var(--sheet-shade),var(--sheet-shade-deep)) var(--sheet-shade-deep);color:var(--color-body-strong)}.dark h4{color:var(--color-ink)}.dark p{font-weight:400}
.dark::before{content:'';position:absolute;top:calc(-1 * var(--sheet-wave));bottom:calc(-1 * var(--sheet-wave));right:calc(100% - 1px);width:calc(var(--sheet-arc) + 1px);background:var(--sheet-shade);-webkit-mask:var(--arc-shade) 0 0/100% 100% no-repeat;mask:var(--arc-shade) 0 0/100% 100% no-repeat}
.step{z-index:2;overflow:visible;padding:28px var(--sheet-pad) 44px;background:var(--sheet-step);color:var(--sheet-step-ink)}
.step::before{content:'';position:absolute;z-index:-3;left:0;right:0;bottom:calc(100% - 1px);height:var(--wave-box);background:var(--sheet-step);-webkit-mask:var(--wave-up) 0 0/100% 100% no-repeat;mask:var(--wave-up) 0 0/100% 100% no-repeat}
.step::after{z-index:-2;top:calc(1px - var(--wave-box));-webkit-mask:var(--lines-up) 0 0/100% 100% no-repeat;mask:var(--lines-up) 0 0/100% 100% no-repeat}
.sprout{top:8px;right:-14px;color:var(--sheet-sprout)}
/* 768–1023: поле 32 px, дуга 18 px — строки «Силы» отходят от неё не меньше чем на 16 px, как поле листа на телефоне. */
@media(max-width:1023px){.example-book{--sheet-pad:32px;--sheet-arc:18px}}
/* Телефон: лист выступает за колонку на 16 px и стоит в 8 px от краёв экрана, поле 16 px — текст в 24 px от края,
   вровень с колонкой страницы (342 px на 390, 312 px на 360), переносы как раньше. Волна ниже, линии реже в единицах
   рисунка, чтобы между ними оставалось 3–4 px. «Тень» встаёт под «Силу» своей волной. */
@media(max-width:767px){
  .example-book{--sheet-radius:24px;--sheet-wave:22px;--sheet-pad:16px;margin-inline:-16px;
    --lines-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -12 1000 52' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' d='M0 24C180 38 330 36 500 20S800 2 1000 16'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.8' opacity='.7' d='M0 18C180 32 330 30 500 14S800 -4 1000 10'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.7' opacity='.45' d='M0 12C180 26 330 24 500 8S800 -10 1000 4'/%3E%3C/svg%3E");
    --lines-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 52' preserveAspectRatio='none' fill='none' stroke='black' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' d='M0 14C200 0 380 4 540 18S820 38 1000 22'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.8' opacity='.7' d='M0 20C200 6 380 10 540 24S820 44 1000 28'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='.7' opacity='.45' d='M0 26C200 12 380 16 540 30S820 50 1000 34'/%3E%3C/svg%3E")}
  .scene{padding:24px var(--sheet-pad) 12px}
  .light{padding:calc(var(--sheet-wave) + 20px) var(--sheet-pad) calc(var(--sheet-wave) + 18px);background:linear-gradient(180deg,var(--sheet-light-soft),var(--sheet-light)) var(--sheet-light)}
  .dark{padding:20px var(--sheet-pad) calc(var(--sheet-wave) + 18px);background:linear-gradient(180deg,var(--sheet-shade),var(--sheet-shade-deep)) var(--sheet-shade-deep)}
  .dark::before{top:auto;right:0;left:0;bottom:calc(100% - 1px);width:auto;height:var(--wave-box);-webkit-mask-image:var(--wave-shade);mask-image:var(--wave-shade)}
  .step{padding:18px var(--sheet-pad) 28px}
}

/* ── Какой вопрос твой? (решение 301): раздел, список без JavaScript и лист ответа ─────────────────────────────
   Общие правила для «Ростка» (ниже) и вариантов прототипа. Без JavaScript раздел — список вопросов-раскрытий, в каждом —
   тот же «лист», что был у примеров (Сила, Тень, шалфейная полоса с ростком), вместо «Первого шага» — «Где ответ».
   С JavaScript лист ответа один: на широком экране колонкой справа и липнет при прокрутке, на узком — под вопросом. */
.ask{position:relative;isolation:isolate;--ask-spring:cubic-bezier(.34,1.56,.64,1);--ask-ease:cubic-bezier(.22,1,.36,1);background:var(--color-surface-soft)}
.ask .chapter-heading{margin-bottom:28px}
.ask-lead{color:var(--color-body)}
.ask .example-actions{margin-top:24px}
.ask-chat{margin-top:20px}
.ask-chat a{display:inline-flex;align-items:center;min-height:48px;font-size:15px;color:var(--color-body-strong);text-underline-offset:4px}

/* Без JavaScript: вопросы-раскрытия. */
.ask-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ask-list summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 20px;border:1px solid var(--color-hairline-strong);border-radius:28px;background:var(--color-canvas);font:400 18px/1.4 var(--font-reading);color:var(--color-ink);cursor:pointer;list-style:none}
.ask-list summary::-webkit-details-marker{display:none}
.ask-list summary::after{content:'';flex:none;width:9px;height:9px;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.ask-list details[open]>summary{border-color:var(--color-band);background:var(--sheet-step,#e3eadf)}
.ask-list details[open]>summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
.ask-list details>.example-book{margin-top:12px}
.ask-list .scene h3{display:none}

.ask-map.is-live .ask-list{display:none}

/* Лист ответа: прежний «лист» примеров, проявляется по частям. */
.ask-card{position:relative;flex:0 0 100%;max-width:100%}
.ask-card[hidden]{display:none}
.ask-card .example-book>.case{margin:0}
.ask-card.is-entering .scene,.ask-card.is-entering .side,.ask-card.is-entering .step-copy{animation:ask-rise .55s var(--ask-ease) both}
.ask-card.is-entering .light{animation-delay:.07s}
.ask-card.is-entering .dark{animation-delay:.14s}
.ask-card.is-entering .step-copy{animation-delay:.2s}
.ask-card.is-entering .sprout{animation:ask-sprout .9s var(--ask-spring) .2s both}
@keyframes ask-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes ask-sprout{from{opacity:0;transform:translateY(24px) scale(.6) rotate(-8deg)}}

/* Широкий экран: рисунок слева, лист ответа справа; лист в узкой колонке складывается, как на телефоне. */
@media(min-width:900px){
  .ask-map.is-live{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center}
  .ask-map.is-live>.ask-card{align-self:start;position:sticky;top:92px}
  .ask-card .example-book{--sheet-pad:32px;--sheet-wave:26px;--sheet-arc:18px}
  .ask-card .two-sides{grid-template-columns:1fr}
  .ask-card .scene{padding:30px var(--sheet-pad) 14px}
  .ask-card .scene h3{font-size:24px}
  .ask-card .light{padding:calc(var(--sheet-wave) + 22px) var(--sheet-pad) calc(var(--sheet-wave) + 20px);background:linear-gradient(180deg,var(--sheet-light-soft),var(--sheet-light)) var(--sheet-light)}
  .ask-card .dark{padding:20px var(--sheet-pad) calc(var(--sheet-wave) + 20px);background:linear-gradient(180deg,var(--sheet-shade),var(--sheet-shade-deep)) var(--sheet-shade-deep)}
  .ask-card .dark::before{top:auto;right:0;left:0;bottom:calc(100% - 1px);width:auto;height:var(--wave-box);-webkit-mask-image:var(--wave-shade);mask-image:var(--wave-shade)}
  .ask-card .side-title{margin-bottom:14px}
  .ask-card .side h4,.ask-card .step h4{font-size:23px}
  .ask-card .side>p,.ask-card .step p{font-size:17px}
  .ask-card .step{padding:20px var(--sheet-pad) 34px}
}
@media(max-width:899px){
  .ask-map.is-live>.ask-card{margin-top:28px}
}
@media(max-width:767px){
  .ask-list summary{font-size:17px;padding:12px 18px}
}
@media(prefers-reduced-motion:reduce){
  .ask-card.is-entering *{animation:none!important}
}

/* ── Вопросы «Росток» (решение 301, вариант Б) ─────────────────────────────────────────────────────────────
   Вопрос — строка Literata у рисунка с тонкой чертой пера, его метка — лист на черешке (под землёй — клубенёк на
   корешке); вся строка — цель нажатия от 48 px. Рисунок — штриховка гравюры: пучки тонких линий тёплого графита,
   бумажная тень стебля, светлая половина листа и штрихованная тень. Шалфей — только у выбранного: лист закрашен,
   черта под вопросом толще (не только цвет, WCAG 1.4.1). */
.org-stage{position:relative;touch-action:pan-y;padding:34px 0 56px}
.org-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.org-rows{position:relative;z-index:1;display:grid;grid-template-columns:52px minmax(0,1fr);row-gap:2px;align-items:center}
.org-q{position:relative;grid-column:2;justify-self:start;display:flex;align-items:center;min-height:48px;margin:0;padding:5px 8px 5px 0;border:0;background:none;color:var(--color-ink);font:400 17px/1.35 var(--font-reading);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.org-q[data-size="l"]{font-size:18px}
.org-mark{flex:none;width:48px;height:30px}
.org-text{text-wrap:balance;text-decoration:underline;text-decoration-color:#cfc5b6;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .25s ease,text-decoration-color .25s ease,transform .18s ease;transform-origin:0 50%}
@media(hover:hover) and (pointer:fine){.org-q:hover .org-text{color:var(--color-band);text-decoration-color:#8fae94}}
.org-q.is-pressed .org-text{transform:scale(.97)}
.org-q.is-on .org-text{color:var(--color-band);text-decoration-color:var(--color-band);text-decoration-thickness:2px}
.org-q:focus{outline:none}
.org-q:focus-visible .org-text{outline:var(--focus-width,2px) solid var(--color-focus);outline-offset:4px;border-radius:4px}
.org-theme{grid-column:2;padding:18px 0 2px;font:400 22px/1.2 Prata,Georgia,serif;color:var(--color-ink);transition:color .3s ease}
.org-theme.is-lit{color:var(--color-band)}
.org-ground{grid-column:1/-1;height:96px}
.org-rows>.ask-card{grid-column:1/-1;margin:4px 0 16px 40px;text-align:left}
.org-rows>.ask-card .example-book{margin-inline:0}
.org-rows>.ask-card .scene{display:none}
.org-rows>.ask-card .light{padding-top:24px}

/* Штриховка. */
.org-stem-paper{fill:#e3d9c9;opacity:.95}
.org-stem-line,.org-earth,.org-petiole,.org-sap{fill:none;stroke-linecap:round;stroke-dasharray:var(--len,1000);stroke-dashoffset:0}
.org-stem-line{stroke:#8f8475;stroke-width:.85;opacity:.55}
.org-stem-line.is-core{opacity:.85;stroke-width:1.1}
.org-earth{stroke:#9b8f7e;stroke-width:.9;opacity:var(--o,1)}
.org-knot-ring{fill:none;stroke:#b4a895;stroke-width:1}
.org-knot-dot{fill:var(--color-surface-soft);stroke:#7c7163;stroke-width:1.2}
.org-petiole{stroke:#8f8475;stroke-width:1.15;opacity:.9}
.org-leaf-body{transform-box:fill-box;transform-origin:0% 50%}
.org-leaf.is-root .org-leaf-body{transform-origin:50% 50%}
.org-leaf-light,.org-leaf-shade{fill:#f3ede2;stroke:#8f8475;stroke-width:.8;transition:fill .35s ease}
.org-leaf-shade{fill:#e9e1d4}
.org-leaf-hatch{fill:none;stroke:#7c7163;stroke-width:.6;opacity:.75}
.org-leaf-rib{fill:none;stroke:#776c5f;stroke-width:.85}
.org-leaf.is-on .org-leaf-light{fill:#d6e2d1}
.org-leaf.is-on .org-leaf-shade{fill:#bcceb8}
.org-leaf.is-on .org-leaf-rib{stroke:var(--color-band)}
.org-bud-petal.is-core .org-leaf-light{fill:#e3eadf}
.org-bud-petal.is-core .org-leaf-shade{fill:#cbd9c7}
.org-sap{stroke:#7f9d82;stroke-width:2.4;stroke-dashoffset:var(--len,1000);animation:org-sap .95s var(--ask-ease) forwards}
.org-sap.is-still{animation:none;stroke-dashoffset:0}
.org-stage.is-redraw *{transition:none!important}
@keyframes org-sap{to{stroke-dashoffset:0}}
.org-leaf-body.is-flip{animation:org-flip .62s cubic-bezier(.3,.7,.3,1)}
@keyframes org-flip{0%{transform:scaleY(1)}45%{transform:scaleY(-.08)}100%{transform:scaleY(1)}}
/* Корни «Общий корень» (решение 335): ленты корней — бумагой стебля сплошным цветом (#e3d9c9 при .95 на полосе),
   чтобы наложение у шейки не темнело; второй порядок — клин тушью; стержень — светлая и теневая пряди. */
.org-collar,.org-rt-paper{fill:#e4dac9}
.org-rt-line,.org-strand-edge{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,1000);stroke-dashoffset:0}
.org-rt-line{stroke:#8f8475;stroke-width:.85;opacity:.6}
.org-rt-line.is-core{stroke-width:1.1;opacity:.9}
.org-rt-twig{fill:#8f8475;opacity:.6}
.org-rt-hatch{fill:none;stroke:#7c7163;stroke-width:.6;opacity:.6;stroke-linecap:round}
.org-rt-hatch.is-strand{opacity:.55}
.org-strand{fill:#ece4d6}
.org-strand.is-shade{fill:#dcd0bd}
.org-strand-edge{stroke:#8f8475;stroke-width:.9}
.org-cap{fill:#9b8f7e;transition:fill .35s ease}
.org-leaf.is-on .org-cap{fill:#7f9d82}
.org-sap.is-long{animation-duration:1.5s}

/* Широкий экран: стебель посередине, вопросы темы по очереди слева и справа, тема — подпись на стебле. */
.org-stage[data-layout="wide"] .org-rows{grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);row-gap:8px}
.org-stage[data-layout="wide"] .org-theme{grid-column:1/-1;justify-self:center;margin:16px 0 2px;padding:4px 16px 6px;border-radius:18px;background:var(--color-surface-soft)}
.org-stage[data-layout="wide"] .org-q[data-side="left"]{grid-column:1;justify-self:end;flex-direction:row-reverse;text-align:right;padding:5px 0 5px 8px}
.org-stage[data-layout="wide"] .org-q[data-side="left"] .org-text{transform-origin:100% 50%}
.org-stage[data-layout="wide"] .org-q[data-side="right"]{grid-column:3}
.org-stage[data-layout="wide"] .org-mark{width:60px}
.org-stage[data-layout="wide"] .org-ground{height:112px}
@media(min-width:900px){
  .ask-map.is-live[data-variant="tree"]{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start}
  .ask-map.is-live[data-variant="tree"]>.ask-card{position:sticky;top:92px}
}

/* Появление: стебель растёт от семечка, корни уходят вниз; ветвь раскрывается, когда доходит до экрана:
   черешок тянется, лист разворачивается, подпись проступает. Каждая часть стартует на середине предыдущей. */
.org-stage:not(.is-calm) .org-stem-line:not(.is-in),.org-stage:not(.is-calm) .org-earth:not(.is-in),.org-stage:not(.is-calm) .org-petiole:not(.is-in){stroke-dashoffset:var(--len,1000)}
.org-stage:not(.is-calm) .org-stem-paper:not(.is-in),.org-stage:not(.is-calm) .org-bud:not(.is-in),.org-stage:not(.is-calm) .org-knot:not(.is-in){opacity:0}
.org-stage:not(.is-calm) .org-leaf:not(.is-in) .org-leaf-body{opacity:0;transform:scale(.12) rotate(-55deg)}
.org-stage:not(.is-calm) .org-q:not(.is-in) .org-text,.org-stage:not(.is-calm) .org-theme:not(.is-in){opacity:0;transform:translateY(8px)}
.org-stem-line.is-in{transition:stroke-dashoffset 1.2s cubic-bezier(.45,.05,.3,1)}
/* Узкий экран: стебель длиннее экрана, его рост ушёл бы за край — стебель проявляется, а ветви раскрываются по одной. */
.org-stage[data-layout="narrow"]:not(.is-calm) .org-stem-line:not(.is-in),.org-stage[data-layout="narrow"]:not(.is-calm) .org-earth:not(.is-in){stroke-dashoffset:0;opacity:0}
.org-stage[data-layout="narrow"] .org-stem-line.is-in,.org-stage[data-layout="narrow"] .org-earth.is-in{transition:opacity .7s ease}
.org-earth.is-in{transition:stroke-dashoffset .9s var(--ask-ease) .1s}
.org-stem-paper.is-in{transition:opacity .8s ease .4s}
.org-bud.is-in{transition:opacity .6s ease 1.1s}
.org-knot.is-in{transition:opacity .4s ease var(--wait,0s)}
/* Корни растут, когда полоса земли доходит до экрана: волокна прорисовываются от шейки, бумага и штрих проявляются следом. */
.org-stage:not(.is-calm) :is(.org-rt-line,.org-strand-edge).org-rs:not(.is-in){stroke-dashoffset:var(--len,1000)}
.org-stage:not(.is-calm) :is(.org-rt-paper,.org-rt-hatch,.org-rt-twig,.org-strand,.org-collar).org-rs:not(.is-in){opacity:0}
:is(.org-rt-line,.org-strand-edge).org-rs.is-in{transition:stroke-dashoffset var(--dur,1.2s) cubic-bezier(.45,.05,.3,1) var(--d,0s)}
:is(.org-rt-paper,.org-rt-hatch,.org-rt-twig,.org-strand,.org-collar).org-rs.is-in{transition:opacity .8s ease var(--d,0s)}
.org-petiole.is-in{transition:stroke-dashoffset .45s var(--ask-ease) calc(var(--wait,0s) + var(--k,0) * .09s)}
.org-leaf.is-in .org-leaf-body{transition:transform .75s var(--ask-spring) calc(var(--wait,0s) + .2s + var(--k,0) * .09s),opacity .25s ease calc(var(--wait,0s) + .2s + var(--k,0) * .09s)}
.org-theme.is-in{transition:opacity .45s ease var(--wait,0s),transform .5s var(--ask-ease) var(--wait,0s),color .3s ease}
.org-q.is-in .org-text{transition:opacity .45s ease calc(var(--wait,0s) + .3s + var(--k,0) * .09s),transform .5s var(--ask-ease) calc(var(--wait,0s) + .3s + var(--k,0) * .09s),color .25s ease,text-decoration-color .25s ease}

@media(max-width:767px){
  .org-q{font-size:16.5px}
  .org-q[data-size="l"]{font-size:17.5px}
  .org-theme{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  .org-stage *{transition:none!important;animation:none!important}
}
@media(min-width:1200px){.ask-map.is-live[data-variant="tree"]{grid-template-columns:minmax(0,1.38fr) minmax(0,1fr)}}