/* Примеры «до и после» (tool-examples.js): главная, посадочные страницы, статьи и пустой раздел в приложении */
.cmp{--x:50%;position:relative;overflow:hidden;margin:0 auto;border-radius:14px;background:var(--surface-2);box-shadow:var(--shadow);user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cmp.port{width:min(100%,420px)}
.cmp.land{width:min(100%,620px)}
.cmp img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(22,18,31,.12);pointer-events:none}
.cmp::before{content:"";position:absolute;z-index:2;top:50%;left:var(--x);width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;pointer-events:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 2px 12px rgba(22,18,31,.28)}
.cmp:focus-within::before{outline:3px solid var(--a1);outline-offset:2px}
.cmp input{position:absolute;z-index:3;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.cmp-tag{position:absolute;z-index:2;top:10px;padding:4px 9px;border-radius:8px;background:rgba(22,18,31,.6);color:#fff;font-size:12px;font-weight:800;pointer-events:none}
.cmp-tag.l{left:10px}
.cmp-tag.r{right:10px}

.ex-stage{max-width:100%}
.ex-flow{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,2.3fr);gap:12px;align-items:center}
.ex-flow.wide{grid-template-columns:minmax(0,.8fr) 26px minmax(0,2.6fr)}
.ex-flow.prompt{grid-template-columns:minmax(0,1fr) 26px minmax(0,1.6fr)}
.ex-flow figure{margin:0}
.ex-flow img,.ex-flow video{display:block;width:100%;height:auto;border-radius:12px;background:var(--surface-2);box-shadow:var(--shadow)}
.ex-flow video{background:#111}
.ex-src,.ex-res{display:grid;gap:10px}
.ex-res.n2,.ex-res.n4{grid-template-columns:1fr 1fr}
.ex-res.n3{grid-template-columns:repeat(3,1fr)}
.ex-flow figcaption{margin-top:5px;color:var(--muted);font-size:12.5px;line-height:1.3;text-align:center}
.ex-arrow{color:var(--a1);font-size:22px;font-weight:800;text-align:center}
.ex-prompt{padding:14px 16px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14px;font-style:italic;line-height:1.5}
.ex-note{margin:12px auto 0;max-width:560px;color:var(--muted);font-size:13px;line-height:1.45;text-align:center}
@media (max-width:560px){
  .ex-flow,.ex-flow.wide,.ex-flow.prompt{grid-template-columns:1fr}
  .ex-arrow{transform:rotate(90deg)}
  .ex-src{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);max-width:78%;margin:0 auto}
}
.ex-block{margin:18px 0 26px}
.ex-single{margin:16px auto 24px;max-width:340px}
.ex-single img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}