/* "Also in the Chrome extension" (2026-10-26): the panel on a free tool page (and the DESIGN.md
   generator) that stands for the extension's tool for the same job, whose own page now redirects
   here. The text, Add to Chrome and one second action on the left, the tool's real clip in a
   frame on the right; one column on phones. A lavender tint, like the extension band on the
   free tools page. --ui-* tokens only, light and dark. */
.xp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:36px;margin:72px 0;padding:32px;border-radius:16px;background:var(--ui-tint);box-sizing:border-box}
.xp-text{min-width:0}
.xp-label{margin:0 0 10px;font:500 12.5px var(--ui-mono);color:var(--ui-link)}
.xp h2{margin:0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--ui-text)}
.xp-text>p:not(.xp-label){max-width:520px;margin:10px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.01em;color:var(--ui-dim)}
.xp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.xp-actions .ui-btn img{width:20px;height:20px}
.xp-clip{margin:0}
.xp-clip video{display:block;width:100%;height:auto;aspect-ratio:8/5}
.xp :is(a,video):focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media (max-width:860px){
  .xp{grid-template-columns:minmax(0,1fr);gap:22px;margin:48px 0;padding:22px}
  .xp h2{font-size:23px}
  .xp-actions .ui-btn{flex:1 1 auto}
}