/* Try it: the real engine, on a sheet of paper, under the visitor's fingers. */
.tryit { background: #141416; color: #f2f2f4; padding: 72px 0 84px; }
.tryit .wrap { max-width: 1240px; margin: 0 auto; padding: 0 30px; }
.tryit-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 48px; align-items: start; }
.tryit-kicker { font-size: var(--t-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--violet); font-weight: var(--w-bold); margin: 0 0 14px; }
.tryit h2 { font-size: var(--t-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 18px; text-wrap: balance; }
.tryit p { font-size: var(--t-md); line-height: var(--lh-body); color: rgba(255,255,255,0.72); max-width: 44ch; margin: 0 0 22px; }
.tryit-pill { display: inline-flex; align-items: flex-start; gap: 10px; background: #e4e8ec; color: #1f262e; border-radius: 14px; padding: 12px 16px 12px 14px; font-family: var(--sans); font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; max-width: 100%; }
.tryit-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 8px; background: #8cc81e; box-shadow: 0 0 0 3px rgba(255,255,255,0.7); transition: background 0.3s; }
.tryit-pill b { font-weight: 600; }
.tryit-tip { display: block; color: #66707b; font-size: 13.5px; margin-top: 4px; line-height: 1.7; }
.tryit-key { display: inline-block; font-family: var(--mono); font-size: 11px; background: #fff; border-radius: 6px; padding: 1px 7px; box-shadow: 0 0 0 1px rgba(31,38,46,0.10), 0 1.5px 0 rgba(31,38,46,0.10); color: #1f262e; vertical-align: 0; }
.tryit-keys { display: flex; gap: 8px; margin-top: 14px; }
.tryit-keys button { font: inherit; font-family: var(--mono); font-size: 13px; color: #f2f2f4; background: rgba(255,255,255,0.08); border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.tryit-keys button:hover { background: rgba(255,255,255,0.14); }
.tryit-sheet { background: #fff; color: #000; border-radius: 2px 2px 0 0; box-shadow: 0 1px 3px rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15); font-family: var(--courier); font-size: 16px; line-height: 1; padding: 58px 90px 40px 140px; min-height: 560px; width: 100%; margin: 0; cursor: text; position: relative; }
.tryit-sheet::before { content: '1.'; position: absolute; top: 26px; right: 90px; font-family: var(--courier); font-size: 16px; color: #000; }
.tl { outline: none; white-space: pre-wrap; word-break: break-word; min-height: 1em; margin-top: 1em; caret-color: #000; }
.tl:first-child { margin-top: 0; }
.tl[data-mode="CHARACTER"] { margin-left: 277px; margin-top: 1em; }
.tl[data-mode="DIALOGUE"] { margin-left: 144px; margin-right: 134px; margin-top: 0; }
.tl[data-mode="PARENTHETICAL"] { margin-left: 216px; margin-right: 196px; margin-top: 0; }
.tl[data-mode="TRANSITION"] { text-align: right; }
/* Le texte fantome ne vit que sur la ligne ou est le curseur. Sinon une
   suite de lignes vides empile le meme fantome, ce qu'aucun traitement de
   texte ne fait, et la demo se met a mentir sur le produit. */
.tl:empty::after { content: '\200b'; }
.tl.is-cur:empty::after { content: attr(data-ph); color: #9a9a9a; }

/* The Google Docs frame: a real capture of the 2026 chrome on top, the grey canvas, the page. */
.gdoc { background: #fff; border-radius: 12px; overflow: visible; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3); position: relative; }
.gdoc-chrome { display: block; width: 100%; height: auto; border-radius: 12px 12px 0 0; }
.gdoc-chrome[hidden] { display: none; }
.gdoc-canvas { position: relative; background: #f9fbfd; padding: 22px 22px 0; overflow: visible; border-radius: 0 0 12px 12px; display: flex; justify-content: center; }
.gdoc-pagewrap { width: 100%; overflow: hidden; margin: 0; }
.tryit-side { position: absolute; left: -150px; top: 190px; width: 300px; z-index: 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.tryit-side .tryit-pill { font-size: 14px; background: #ece6ff; box-shadow: 0 10px 30px rgba(31,38,46,0.22), 0 1px 3px rgba(31,38,46,0.10), inset 0 0 0 1px rgba(111,87,255,0.18); }
.tryit-side .tryit-tip { color: #4f4b66; }
.tryit-cta { display: block; font-size: 14.5px; font-weight: 600; color: #4a35d6; margin-bottom: 6px; }
.tryit-cta::after { content: ' \2192'; }
.tryit-side .tryit-keys { margin-top: 0; }
.tryit-side .tryit-keys button { color: #1f262e; background: #fff; box-shadow: 0 1px 2px rgba(31,38,46,0.12), 0 2px 6px rgba(31,38,46,0.06); }
.hero-tryit { max-width: 960px; margin: 34px auto 0; text-align: left; }
.hero-tryit .tryit-sheet { margin: 0; }
.js .hero-inner > .hero-tryit { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .gdoc-canvas { padding: 12px 10px 0; display: block; }
  .tryit-side { position: static; width: auto; margin-bottom: 12px; }
  .tryit-sheet { font-size: 13px; padding: 40px 28px 30px 44px; min-height: 380px; }
  .tryit-sheet::before { top: 20px; right: 28px; font-size: 13px; }
  .tl[data-mode="CHARACTER"] { margin-left: 120px; }
  .tl[data-mode="DIALOGUE"] { margin-left: 56px; margin-right: 40px; }
  .tl[data-mode="PARENTHETICAL"] { margin-left: 88px; margin-right: 60px; }
}

/* A blinking caret on the line to type, until the visitor clicks. */
.tl.is-cur:empty:not(:focus)::before { content: ''; display: inline-block; width: 1.5px; height: 1em; background: #000; vertical-align: -0.1em; margin-right: 1px; animation: tryit-blink 1.1s steps(1) infinite; }
@keyframes tryit-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tl.is-cur:empty:not(:focus)::before { animation: none; } }


/* The way out, at the bottom of the page. */
.tryit-outro { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 24px); opacity: 0; z-index: 5; display: inline-flex; align-items: center; gap: 14px; background: #1f262e; color: #fff; border-radius: 999px; padding: 10px 12px 10px 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); font-family: var(--sans); font-size: 14px; white-space: nowrap; transition: transform 0.45s cubic-bezier(0.34,1.45,0.64,1), opacity 0.3s; }
.tryit-outro.in { transform: translate(-50%, 0); opacity: 1; }
.tryit-outro-btn { display: inline-flex; align-items: center; background: var(--violet); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 600; text-decoration: none; }
.tryit-outro-btn:hover { background: var(--violet-dark); }
.tryit-outro-alt { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; margin-right: 6px; }
@media (max-width: 900px) { .tryit-outro { white-space: normal; flex-wrap: wrap; justify-content: center; left: 10px; right: 10px; transform: none; width: auto; border-radius: 16px; } .tryit-outro.in { transform: none; } }
/* Word mode: the page the way Word shows it, a square sheet with a thin frame on a grey desk. */
.gdoc.is-word .gdoc-canvas { background: #e8e8e8; }
.gdoc.is-word .tryit-sheet { border-radius: 0; border: 1px solid #c9c9c9; border-bottom: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
.gdoc.is-word .tryit-outro { box-shadow: 0 10px 30px rgba(0,0,0,0.18); }