/* ==========================================================================
   CANNED RESPONSES — "TYPE IT ONCE" design system
   The absurdity of typing it twice. Paper & ink & one blue.
   Manual world = serif ink. Programmed world = mono commands + keycaps.
   No frameworks. Motion = the product's verbs: TYPE INSERT EXPAND COMPRESS
   SELECT SAVE RESOLVE PRESS. Honors prefers-reduced-motion.
   ========================================================================== */

/* ---------- fonts (self-hosted; Fraunces + Inter are variable) ---------- */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --paper:#faf9f5; --paper2:#f2f0e9; --card:#ffffff;
  --ink:#14161c; --mut:#5a6170; --faint:#62697a; --body-ink:#2a2d36;
  --line:#e6e3d8; --line2:#d3cfc0; --line3:#b9b4a2;
  --blue:#2563eb; --blue-deep:#1d52c9; --blue-soft:rgba(37,99,235,.09); --blue-line:rgba(37,99,235,.4);
  --btn:#2563eb; --btn-hov:#2e6ef5;
  --red:#c93a28; --red-soft:rgba(201,58,40,.08);
  --green:#177a4b; --green-soft:rgba(23,122,75,.1);
  --hl:#ffe9a8;
  --bar-bg:rgba(250,249,245,.82);
  --finrule:rgba(20,22,28,.035);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.9,.24,1);
  --snap:cubic-bezier(.2,1.4,.4,1);
  --nav-h:60px;
  --kc-face:linear-gradient(180deg,#ffffff,#f4f2ec);
  --kc-down:linear-gradient(180deg,#f2f0e9,#eae7dc);
  color-scheme:light;
}
/* ---------- dark: the same desk, lamp off ---------- */
html[data-theme="dark"]{
  --paper:#0f1116; --paper2:#151821; --card:#1a1e28;
  --ink:#e9ecf3; --mut:#a0a8b8; --faint:#7d8595; --body-ink:#c6cdda;
  --line:#242936; --line2:#333947; --line3:#4b5365;
  --blue:#6ea3ff; --blue-deep:#8ab3ff; --blue-soft:rgba(110,163,255,.13); --blue-line:rgba(110,163,255,.42);
  --red:#ff6d5a; --red-soft:rgba(255,109,90,.12);
  --green:#46c689; --green-soft:rgba(70,198,137,.15);
  --hl:rgba(255,224,130,.26);
  --bar-bg:rgba(15,17,22,.8);
  --finrule:rgba(233,236,243,.05);
  --kc-face:linear-gradient(180deg,#232936,#1b202b);
  --kc-down:linear-gradient(180deg,#1b202b,#161a23);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--btn);color:#fff}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:800;letter-spacing:-.015em;line-height:1.06;text-wrap:balance;font-variation-settings:"opsz" 100}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:var(--ink)}
.mono{font-family:var(--mono);font-weight:400;letter-spacing:.07em;font-size:.74rem;color:var(--mut)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
section[id]{scroll-margin-top:70px}
.skip{position:fixed;left:12px;top:-48px;z-index:300;background:var(--btn);color:#fff;padding:8px 14px;border-radius:8px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared atoms ---------- */
.cursor{display:inline-block;width:.56em;height:1.06em;background:var(--ink);vertical-align:text-bottom;margin-left:1px;animation:blink 1.06s steps(1) infinite}
.cursor.sm{width:.5em;height:1em}
@keyframes blink{50%{opacity:0}}

.keycap{
  display:inline-flex;align-items:center;justify-content:center;gap:.3em;
  font-family:var(--mono);font-weight:600;font-size:.82rem;letter-spacing:.08em;color:var(--ink);
  background:var(--kc-face);border:1px solid var(--line3);border-bottom-width:4px;border-radius:10px;
  padding:9px 16px;user-select:none;
  transition:transform .1s,border-bottom-width .1s,background .15s,color .15s,border-color .15s;
}
.keycap.sm{padding:6px 11px;font-size:.68rem;border-radius:8px;border-bottom-width:3px}
.keycap.xl{padding:22px 38px;font-size:clamp(1.2rem,2.6vw,2rem);border-radius:16px;border-bottom-width:7px}
.keycap.is-down,.keycap:active{transform:translateY(3px);border-bottom-width:1px;background:var(--kc-down)}
.keycap.xl.is-down{transform:translateY(6px)}
.k{display:inline-block;font-family:var(--mono);font-size:.86em;font-weight:600;letter-spacing:.06em;color:var(--ink);background:var(--kc-face);border:1px solid var(--line3);border-bottom-width:2.5px;border-radius:6px;padding:0 .48em;line-height:1.55;vertical-align:baseline}
.bk-plus{font-family:var(--mono);font-size:1.4rem;color:var(--faint);margin:0 10px}

.cmd{font-family:var(--mono);font-size:.85em;font-weight:600;letter-spacing:.02em;color:var(--blue);background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:7px;padding:.08em .5em}
.tok-like{color:var(--green);font-weight:600}

.btn{display:inline-flex;align-items:center;gap:.5em;padding:11px 20px;border-radius:11px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s,color .16s,border-color .16s;will-change:transform}
.btn-lg{padding:14px 26px;font-size:1.02rem}
.btn-blue{background:var(--btn);color:#fff;box-shadow:0 1px 0 #1d52c9,0 6px 20px -8px rgba(37,99,235,.5)}
.btn-blue:hover{background:var(--btn-hov);transform:translateY(-2px);box-shadow:0 1px 0 #1d52c9,0 10px 26px -8px rgba(37,99,235,.55)}
.btn-blue:active{transform:translateY(0) scale(.985)}
.btn-ghost{border-color:var(--line2);color:var(--mut);background:var(--card)}
.btn-ghost:hover{border-color:var(--blue-line);color:var(--blue);transform:translateY(-2px)}

.replay{align-self:center;color:var(--faint);letter-spacing:.12em;font-size:.66rem;padding:7px 13px;border:1px solid var(--line2);border-radius:8px;background:var(--card);transition:color .2s,border-color .2s}
.replay:hover{color:var(--blue);border-color:var(--blue-line)}

.pip{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);flex:none}

/* ---------- top bar ---------- */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;gap:26px;padding:0 clamp(16px,4vw,44px);
  background:var(--bar-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-weight:700;font-size:1rem;letter-spacing:-.01em}
.brand-key{border:1px solid var(--line2);border-bottom-width:2.5px;border-radius:6px;background:var(--kc-face);padding:1px 7px;font-size:.6rem;letter-spacing:.1em;color:var(--mut)}
.bar-nav{display:flex;gap:22px;margin-left:auto}
.bar-nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-decoration:none;transition:color .15s}
.bar-nav a:hover{color:var(--blue)}
.btn-bar{padding:8px 16px;font-size:.86rem}
/* theme toggle — a little keycap that flips the lamp */
.theme-key{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:30px;border:1px solid var(--line3);border-bottom-width:3px;border-radius:8px;
  background:var(--kc-face);color:var(--mut);
  transition:transform .1s,border-bottom-width .1s,color .15s;
}
.theme-key:hover{color:var(--blue)}
.theme-key:active{transform:translateY(2px);border-bottom-width:1px}
.theme-key svg{width:15px;height:15px}
.theme-key .moon{display:none}
html[data-theme="dark"] .theme-key .sun{display:none}
html[data-theme="dark"] .theme-key .moon{display:block}
@media (max-width:900px){
  .bar{gap:12px}
  .bar-nav,.brand-key{display:none}
  .btn-bar{margin-left:auto}
  .btn-free{display:none}
}

/* ==========================================================================
   ACT I — THE TYPIST
   ========================================================================== */
.typist{position:relative}
.t-track{height:520vh;height:520svh;position:relative}
.t-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.t-rules{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--line) 31px 32px);
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 45%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse 90% 85% at 50% 45%,#000 25%,transparent 75%);
}

/* captions */
.t-cap{position:absolute;z-index:6;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.t-cap-hero{left:clamp(20px,6vw,90px);top:max(15vh,calc(var(--nav-h) + 44px));max-width:min(42vw,620px)}
.t-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.t-h1{font-size:clamp(40px,5.4vw,96px)}
.t-lead{margin-top:20px;font-size:clamp(1rem,1.2vw,1.12rem);color:var(--mut);max-width:46ch}
.t-lead b{color:var(--ink);font-weight:600}
.t-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.t-cap-side{left:clamp(20px,6vw,90px);top:34vh;max-width:min(34vw,480px);opacity:0;transform:translateY(14px);pointer-events:none}
.t-cap-side h2{font-size:clamp(26px,3vw,46px)}
.t-note{margin-top:12px;letter-spacing:.12em}
.t-note.is-red{color:var(--red)}
.t-note.is-blue{color:var(--blue)}
.t-note .k{font-size:.72rem}

.t-cap[data-cap="3"]{top:14vh}
.t-cap-end{left:clamp(20px,6vw,90px);top:50%;transform:translateY(calc(-50% + 16px));max-width:min(40vw,600px);opacity:0;pointer-events:none}
.t-h2end{font-size:clamp(34px,4.4vw,76px)}
.t-lead-end{margin-top:18px}

.typist[data-scene="0"] .t-cap-hero{opacity:1;transform:none}
.typist[data-scene]:not([data-scene="0"]) .t-cap-hero{opacity:0;transform:translateY(-16px);pointer-events:none}
.typist[data-scene="1"] .t-cap[data-cap="1"],
.typist[data-scene="2"] .t-cap[data-cap="2"],
.typist[data-scene="3"] .t-cap[data-cap="3"]{opacity:1;transform:translateY(0)}
.typist[data-scene="4"] .t-cap-end{opacity:1;transform:translateY(-50%);pointer-events:auto}

/* the sheet */
.sheet{
  position:absolute;z-index:4;margin:0;
  right:clamp(16px,7vw,110px);top:19vh;width:min(46vw,540px);
  transition:opacity .5s var(--ease),transform .7s var(--ease);
}
.sh-card{
  position:relative;z-index:3;display:flex;flex-direction:column;min-height:56vh;
  background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(20,22,28,.25);
  transition:opacity .45s;
}
.sh-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--paper2);color:var(--mut);letter-spacing:.14em;font-size:.66rem}
.sh-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.sh-dot.li{background:#0a66c2}
.sh-field{display:flex;gap:12px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:.7rem;letter-spacing:.04em}
.sh-field i{font-style:normal;color:var(--faint);min-width:52px}
.sh-field span{color:var(--ink)}
.sh-body{
  flex:1;padding:16px;white-space:pre-wrap;
  font-size:.92rem;line-height:1.7;color:var(--body-ink);
  transition:opacity .4s;
}
.sh-ghost{
  position:absolute;inset:0;z-index:1;border-radius:14px;
  background:var(--card);border:1px solid var(--line2);
  opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.sh-ghost.g1{transform:rotate(0) translate(0,0)}
.sh-ghost.g2{transform:rotate(0) translate(0,0)}
.sh-ghost.g3{transform:rotate(0) translate(0,0)}
.typist[data-scene="1"] .sh-ghost.g1{opacity:1;transform:rotate(-2.2deg) translate(-14px,10px)}
.typist[data-scene="1"] .sh-ghost.g2{opacity:.75;transform:rotate(1.6deg) translate(12px,20px);transition-delay:.15s}
.typist[data-scene="1"] .sh-ghost.g3{opacity:.5;transform:rotate(-3.4deg) translate(-24px,32px);transition-delay:.3s}
.typist[data-scene="2"] .sh-ghost,.typist[data-scene="3"] .sh-ghost,.typist[data-scene="4"] .sh-ghost{opacity:0}
.typist[data-scene="2"] .sh-card{opacity:.6}
.typist[data-scene="3"] .sh-body{opacity:.25}
.typist[data-scene="4"] .sh-card{opacity:1}
.typist[data-scene="4"] .sh-body{opacity:1}
.sh-body.flash{animation:insertFlash .5s var(--ease)}
@keyframes insertFlash{0%{background:var(--blue-soft)}100%{background:transparent}}

/* meter */
.meter{
  position:absolute;z-index:7;right:clamp(16px,7vw,110px);top:calc(var(--nav-h) + 14px);
  display:flex;gap:22px;justify-content:flex-end;
}
.m-row{display:flex;flex-direction:column;gap:1px;align-items:flex-end}
.m-row i{font-style:normal;font-size:.56rem;letter-spacing:.18em;color:var(--faint)}
.m-row b{font-size:1.05rem;font-weight:600;letter-spacing:.06em;color:var(--red);font-variant-numeric:tabular-nums}
.m-row b.stamp{color:var(--blue);animation:stampIn .5s var(--snap)}
@keyframes stampIn{0%{transform:scale(1.9)}100%{transform:scale(1)}}

/* giant keys */
.bigkeys{
  position:absolute;z-index:8;left:24vw;top:46%;transform:translate(-50%,-50%) scale(.86);
  display:flex;align-items:center;opacity:0;
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.typist[data-scene="2"] .bigkeys{opacity:1;transform:translate(-50%,-50%) scale(1)}
.typist[data-scene="3"] .bigkeys{opacity:0;visibility:hidden;transform:translate(-50%,-62%) scale(.7);transition:opacity .3s var(--ease),transform .4s var(--ease),visibility 0s .3s}

/* shards + chip */
.shards{position:absolute;inset:0;z-index:5;pointer-events:none}
.shard{
  position:absolute;font-family:var(--mono);font-size:.6rem;letter-spacing:.02em;color:var(--mut);
  background:var(--card);border:1px solid var(--line2);border-radius:6px;padding:3px 7px;
  opacity:0;transition:transform .8s var(--ease),opacity .7s var(--ease);
  white-space:nowrap;
}
.typist[data-scene="3"] .shard{opacity:1;transform:translate(var(--tx),var(--ty)) scale(.08);opacity:0}
.typist[data-scene="3"] .shard{transition-delay:calc(var(--i)*45ms)}

.chip-big{
  position:absolute;z-index:8;left:24vw;top:38%;transform:translate(-50%,-50%) scale(.4);
  font-size:1.1rem;font-weight:600;letter-spacing:.04em;color:var(--blue);
  background:var(--blue-soft);border:1.5px solid var(--blue-line);border-radius:12px;padding:10px 20px;
  opacity:0;transition:opacity .4s var(--ease),transform .5s var(--snap);
}
.typist[data-scene="3"] .chip-big{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.5s}
.typist[data-scene="4"] .chip-big{opacity:0;transform:translate(-50%,-50%) scale(.5)}

/* palette (shared look — spine + demo) */
.palette{
  position:absolute;z-index:9;left:24vw;top:63%;transform:translate(-50%,-46%) scale(.94);
  width:min(400px,86vw);border-radius:14px;overflow:hidden;
  background:var(--card);border:1px solid var(--line2);
  box-shadow:0 30px 70px -20px rgba(20,22,28,.35);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .35s var(--snap);
}
.palette.p-open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.p-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper2);letter-spacing:.16em;font-size:.62rem}
.p-key{border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;background:var(--kc-face);padding:1px 7px;font-size:.58rem;color:var(--mut)}
.p-search{display:flex;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--ink);letter-spacing:.02em;min-height:40px}
.p-search input{flex:1;border:0;outline:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;padding:0}
.p-search input::placeholder{color:var(--faint)}
.p-search:focus-within{box-shadow:inset 0 -2px 0 var(--blue)}
.p-list{display:flex;flex-direction:column;padding:6px;max-height:250px;overflow-y:auto}
.p-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:9px;cursor:pointer}
.p-row b{font-weight:600;font-size:.86rem}
.p-row .mono{font-size:.64rem;color:var(--faint)}
.p-row.sel{background:var(--btn);color:#fff}
.p-row.sel .mono{color:rgba(255,255,255,.75)}
.p-empty{padding:14px;color:var(--faint);font-size:.74rem;text-align:center}
.p-foot{display:flex;gap:16px;padding:9px 14px;border-top:1px solid var(--line);font-size:.6rem;color:var(--faint);background:var(--paper2)}

/* ==========================================================================
   shared section chrome
   ========================================================================== */
.sec-head{max-width:1140px;margin:0 auto;padding:0 24px 40px}
.sec-kick{color:var(--blue);letter-spacing:.2em;margin-bottom:14px;font-weight:600}
.sec-head h2{font-size:clamp(30px,3.6vw,54px)}
.sec-sub{margin-top:14px;color:var(--mut);max-width:64ch}
.desk,.expand,.wall,.cap,.both,.loc,.sys,.faq{padding:110px 0;content-visibility:auto}
.desk{contain-intrinsic-size:auto 1250px}
.expand{contain-intrinsic-size:auto 800px}
.wall{contain-intrinsic-size:auto 950px}
.cap{contain-intrinsic-size:auto 850px}
.both{contain-intrinsic-size:auto 750px}
.loc{contain-intrinsic-size:auto 950px}
.sys{contain-intrinsic-size:auto 1500px}
.faq{contain-intrinsic-size:auto 1050px}

/* ==========================================================================
   ACT II — THE DESK
   ========================================================================== */
.desk{background:var(--paper2);border-top:1px solid var(--line)}
.desk-grid{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.compose{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:visible;box-shadow:0 24px 60px -28px rgba(20,22,28,.3)}
.compose .sh-bar{border-radius:14px 14px 0 0}
.dm-live{margin-left:auto;border:1px dashed var(--line3);border-radius:5px;padding:2px 8px;font-size:.56rem;letter-spacing:.12em;color:var(--faint)}
.dm-body{min-height:280px;cursor:text}
.dm-body:empty::before{content:"Click here, then press Alt+A · or type ;intro and hit Tab";color:var(--faint)}
.dm-body:focus{outline:none}
.dm-body:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.dm-hintbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);background:var(--paper2);border-radius:0 0 14px 14px;flex-wrap:wrap}
.dm-key{font-size:.74rem}
.dm-abbr{display:inline-flex;align-items:center;gap:.4em;border:1px solid var(--line2);border-bottom-width:3px;border-radius:8px;background:var(--kc-face);padding:7px 12px;font-size:.68rem;letter-spacing:.08em;color:var(--mut);transition:transform .1s,border-bottom-width .1s}
.dm-abbr:active{transform:translateY(2px);border-bottom-width:1px}
.dm-abbr code{color:var(--blue);font-weight:600}
.dm-hint{margin-left:auto;font-size:.6rem;letter-spacing:.12em;color:var(--faint)}
.dm-side{display:flex;flex-direction:column;gap:14px}
.dm-side-h{font-size:.6rem;letter-spacing:.18em;color:var(--faint);margin-bottom:8px}
.dm-log{list-style:none;margin:0;padding:12px 14px;min-height:120px;background:var(--card);border:1px solid var(--line2);border-radius:12px;display:flex;flex-direction:column;gap:4px}
.dm-log li{font-size:.64rem;letter-spacing:.05em;color:var(--mut);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.dm-log li.on{opacity:1;transform:none}
.dm-log li.ok{color:var(--green)}
.dm-log li.cmdline{color:var(--blue)}
.dm-vars{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:14px}
.dm-vars label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.68rem;color:var(--blue);margin-bottom:8px}
.dm-vars input{width:120px;border:1px solid var(--line2);border-radius:7px;background:var(--paper);padding:5px 9px;font:600 .8rem var(--sans);color:var(--ink)}
.dm-vars input:focus{outline:2px solid var(--blue);outline-offset:1px}
.dm-varnote{font-size:.58rem;color:var(--faint);letter-spacing:.08em;margin-top:4px}
/* demo palette instance */
.dm-palette{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) scale(.94)}
/* inserted tokens — resolved tokens must kern like words, not tags */
.tok-i{display:inline-block;font-family:var(--mono);font-size:.85em;color:var(--blue);background:var(--blue-soft);border-radius:5px;padding:0 .3em;transition:all .3s var(--ease)}
.tok-i.resolved{
  display:inline;font-family:inherit;font-size:inherit;color:var(--green);
  background:linear-gradient(transparent 72%,var(--green-soft) 0);border-radius:0;padding:0;
  animation:tokFlip .45s var(--snap);
}
@keyframes tokFlip{0%{transform:translateY(-.5em) scaleY(.2);opacity:.2}100%{transform:none;opacity:1}}

/* ==========================================================================
   ACT III — EXPANSION
   ========================================================================== */
.ex-stage{max-width:760px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:26px}
.ex-cmdrow{display:flex;align-items:center;gap:18px}
.ex-cmd{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:600;letter-spacing:.02em;color:var(--blue)}
.ex-mail{
  width:100%;background:var(--card);border:1px solid var(--line2);border-radius:14px;
  padding:26px clamp(18px,4vw,40px);box-shadow:0 24px 60px -28px rgba(20,22,28,.3);
  transform-origin:top center;transform:scaleY(.06);opacity:0;
  transition:transform .55s var(--snap),opacity .4s var(--ease);
}
.ex-mail p{margin:0 0 14px;font-size:1rem;line-height:1.75;color:var(--body-ink)}
.ex-mail p:last-child{margin:0}
.ex-stage.is-open .ex-mail{transform:scaleY(1);opacity:1}
.ex-mail .tok{color:var(--green);background:linear-gradient(transparent 72%,var(--green-soft) 0);font-weight:600}
.ex-stage.is-open .ex-mail .tok{animation:tokFlip .45s var(--snap) both}
.ex-stage.is-open .ex-mail .tok:nth-of-type(1){animation-delay:.35s}
.ex-stage.is-open .ex-mail .tok:nth-of-type(2){animation-delay:.5s}
.ex-stage.is-open .ex-mail .tok:nth-of-type(3){animation-delay:.65s}

/* ==========================================================================
   ACT IV — THE WALL
   ========================================================================== */
.wall{background:var(--paper2);border-top:1px solid var(--line)}
.wall-stage{position:relative;max-width:1140px;margin:0 auto;padding:0 24px;min-height:460px}
@media (max-width:979px){.wall-stage{min-height:660px}}
@media (max-width:560px){.wall-stage{min-height:860px}}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.wm{
  background:var(--card);border:1px solid var(--line2);border-radius:9px;padding:9px 11px;
  font-family:var(--mono);font-size:.6rem;line-height:1.6;color:var(--mut);letter-spacing:.02em;
  opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--ease),transform .55s var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wm i{font-style:normal;display:block;color:var(--faint);font-size:.52rem;letter-spacing:.1em}
.wall-stage.is-on .wm{opacity:1;transform:none;transition-delay:calc(var(--i)*40ms)}
.wall-stage.is-crush .wm{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.05) rotate(4deg);transition-delay:calc(var(--i)*18ms)}
.wall-key{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.8);
  display:flex;align-items:center;opacity:0;z-index:3;
  transition:opacity .35s var(--ease),transform .4s var(--snap);
}
.wall-stage.is-crush .wall-key{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wall-stage.is-out .wall-key{opacity:0;transform:translate(-50%,-70%) scale(.7)}
.wall-out{
  position:absolute;left:24px;right:24px;top:54%;transform:translateY(-50%);
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  pointer-events:none;
}
.tcard{
  display:flex;flex-direction:column;gap:5px;background:var(--card);
  border:1px solid var(--blue-line);border-radius:12px;padding:14px 16px;
  box-shadow:0 14px 34px -16px rgba(37,99,235,.35);
  opacity:0;transform:translateY(24px) scale(.9);
  transition:opacity .4s var(--ease),transform .5s var(--snap);
}
.tcard b{font-family:var(--serif);font-weight:800;font-size:.95rem;letter-spacing:.01em}
.tcard code{color:var(--blue);font-size:.68rem;font-weight:600}
.tcard span{color:var(--faint);font-size:.58rem}
.wall-stage.is-out .tcard{opacity:1;transform:none;transition-delay:calc(var(--i)*90ms)}
/* reduced-motion end state: grid and cards coexist, statically */
.wall-stage.is-static .wm{opacity:1;transform:none}
.wall-stage.is-static .wall-key{display:none}
.wall-stage.is-static .wall-out{position:static;transform:none;margin-top:16px}
.wall-stage.is-static .tcard{opacity:1;transform:none}
.wall-foot{max-width:1140px;margin:26px auto 0;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wall-stamp,.cap-flow{letter-spacing:.16em;color:var(--faint)}
.wall-stage.is-out ~ .wall-foot .wall-stamp{color:var(--blue)}

/* ==========================================================================
   ACT V — CAPTURE
   ========================================================================== */
.cap-stage{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center}
.cap-mail{position:relative;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:24px clamp(18px,3vw,34px);box-shadow:0 24px 60px -28px rgba(20,22,28,.25)}
.cap-mail p{margin:0 0 12px;font-size:.98rem;line-height:1.75;color:var(--body-ink)}
.cap-from{font-size:.6rem;letter-spacing:.14em;color:var(--faint)}
.cap-sel{
  background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;
  background-size:0% 100%;border-radius:3px;
  transition:background-size .9s var(--ease);
}
.cap-stage.s1 .cap-sel{background-size:100% 100%}
.cap-pill{
  position:absolute;left:32%;top:34%;transform:translate(-50%,6px) scale(.85);
  background:var(--ink);color:var(--paper);border-radius:999px;padding:7px 14px;
  font-size:.64rem;letter-spacing:.08em;opacity:0;
  box-shadow:0 10px 26px -8px rgba(20,22,28,.5);
  transition:opacity .3s var(--ease),transform .35s var(--snap);
}
.cap-stage.s2 .cap-pill{opacity:1;transform:translate(-50%,0) scale(1)}
.cap-stage.s3 .cap-pill{transform:translate(-50%,2px) scale(.94)}
.cap-stage.s4 .cap-pill{opacity:1;transform:translate(-50%,0) scale(1);background:var(--green)}
.cap-card{
  background:var(--card);border:1.5px solid var(--blue-line);border-radius:14px;padding:20px 22px;
  display:flex;flex-direction:column;gap:9px;
  box-shadow:0 20px 50px -20px rgba(37,99,235,.4);
  opacity:0;transform:translateX(-30px) translateY(12px) rotate(-2deg) scale(.92);
  transition:opacity .45s var(--ease),transform .6s var(--snap);
}
.cap-stage.s4 .cap-card{opacity:1;transform:none}
.cc-h{font-size:.6rem;letter-spacing:.2em;color:var(--blue)}
.cc-title{font-family:var(--serif);font-weight:800;font-size:1.05rem}
.cc-short{font-size:.66rem;color:var(--mut)}
.cc-short code{color:var(--blue);font-weight:600}
.cc-save{font-size:.62rem;letter-spacing:.12em;color:var(--green);opacity:0;transition:opacity .3s}
.cap-stage.s5 .cc-save{opacity:1}

/* ==========================================================================
   ACT VI — GMAIL ⇄ LINKEDIN
   ========================================================================== */
.both{background:var(--paper2);border-top:1px solid var(--line)}
.both-stage{position:relative;max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 130px 1fr;gap:0;align-items:stretch}
.bp{background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;min-height:230px;display:flex;flex-direction:column;box-shadow:0 20px 50px -26px rgba(20,22,28,.28)}
.bp-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper2);font-size:.62rem;letter-spacing:.14em;color:var(--mut)}
.bp-body{flex:1;padding:16px;font-size:.88rem;line-height:1.7;color:var(--body-ink);white-space:pre-wrap}
.bp-body:empty::before{content:"—";color:var(--faint)}
.both-chip{
  align-self:center;justify-self:center;z-index:2;
  font-weight:600;font-size:.8rem;color:var(--blue);
  background:var(--card);border:1.5px solid var(--blue-line);border-radius:10px;padding:8px 13px;
  box-shadow:0 10px 26px -10px rgba(37,99,235,.4);
  transition:transform .7s var(--ease),opacity .4s;
}
.both-stage.to-g .both-chip{transform:translateX(calc(-1 * min(24vw,300px))) scale(.6);opacity:0}
.both-stage.to-l .both-chip{transform:translateX(min(24vw,300px)) scale(.6);opacity:0}
.bp-body .flash{animation:insertFlash .5s var(--ease)}
.bp-body b{font-weight:700}

/* ==========================================================================
   ACT VII — TRUST
   ========================================================================== */
.loc-map{max-width:1140px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center}
.loc-box{
  position:relative;border:1.5px solid var(--line3);border-radius:18px;padding:40px 26px 22px;
  background:
    repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(20,22,28,.025) 16px,rgba(20,22,28,.025) 17px),
    var(--card);
}
.loc-label{position:absolute;top:-9px;left:24px;background:var(--paper);padding:0 10px;color:var(--blue);letter-spacing:.16em;font-size:.62rem;font-weight:600}
.loc-flow{display:flex;align-items:stretch}
.loc-node{flex:1;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line2);border-radius:12px;background:var(--paper);padding:16px 10px}
.loc-node b{font-size:.82rem;letter-spacing:.02em}
.loc-node span{font-size:.56rem;color:var(--faint)}
.loc-node-ext{border-color:var(--blue-line);background:var(--blue-soft)}
.loc-node-ext b{color:var(--blue)}
.loc-link{flex:none;width:38px;align-self:center;border-top:1.5px dashed var(--blue-line);position:relative}
.loc-link::after{content:"▸";position:absolute;right:-3px;top:-11px;color:var(--blue);font-size:.7rem}
.loc-exit{margin-top:18px;font-size:.62rem;letter-spacing:.06em;color:var(--mut);text-align:center}
.loc-exit b{color:var(--ink)}
.loc-nots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.loc-nots li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border:1.5px dashed rgba(201,58,40,.45);border-radius:12px;padding:14px 18px}
.loc-nots s{color:var(--red);letter-spacing:.12em;font-size:.7rem;font-weight:600}
.loc-nots span{color:var(--faint);font-size:.62rem;letter-spacing:.08em}
.loc-fine{max-width:1140px;margin:26px auto 0;padding:0 24px;font-size:.66rem;color:var(--mut);letter-spacing:.06em;line-height:1.9}
.loc-fine span{display:block;max-width:72ch}
.loc-fine code{color:var(--mut)}

/* ==========================================================================
   ACT VIII — SYSTEM LEDGER
   ========================================================================== */
.sys{background:var(--paper2);border-top:1px solid var(--line)}
.sys-ledger{max-width:1140px;margin:0 auto;padding:0 24px}
.sys-row{display:grid;grid-template-columns:64px 1fr minmax(230px,300px);gap:26px;align-items:center;padding:38px 0;border-top:1px solid var(--line2)}
.sys-row:last-child{border-bottom:1px solid var(--line2)}
.sys-num{color:var(--faint);letter-spacing:.14em;align-self:start;padding-top:8px}
.sys-main h3{font-size:clamp(20px,2.2vw,28px)}
.sys-main p{margin-top:10px;color:var(--mut);max-width:56ch}
.sys-viz{justify-self:end;display:flex;flex-direction:column;align-items:center;gap:8px}
.sys-cats{display:flex;flex-wrap:wrap;gap:6px;max-width:260px;justify-content:flex-end}
.sys-cats span{border:1px solid var(--line2);border-radius:6px;background:var(--card);padding:4px 9px;font-size:.56rem;letter-spacing:.1em;color:var(--mut)}
.sys-cats .fav{color:var(--blue);border-color:var(--blue-line)}
.sys-rich{position:relative;width:240px;border:1px solid var(--line2);border-radius:12px;background:var(--card);padding:14px 16px 12px;display:flex;flex-direction:column;gap:5px}
.sys-rich p{margin:0;font-size:.74rem;line-height:1.55;color:var(--body-ink)}
.sys-rich .rb{font-weight:700}
.sys-rich .rl{color:var(--blue);text-decoration:underline;text-decoration-color:var(--blue-line)}
.sys-rich .rhl{background:var(--hl);border-radius:3px;padding:0 .2em}
.sys-rich .rimg{display:flex;align-items:center;gap:6px;margin-top:2px;border:1px dashed var(--line2);border-radius:7px;padding:5px 8px;font-size:.56rem;letter-spacing:.1em;color:var(--faint)}
.sys-rich .rimg i{width:16px;height:12px;border-radius:3px;background:linear-gradient(135deg,var(--blue-soft),var(--green-soft));border:1px solid var(--line2)}
.sys-rich .rok{font-size:.56rem;letter-spacing:.12em;color:var(--green);margin-top:3px}
.sys-keys{display:flex;gap:8px;align-items:center}
.sys-keys .on{color:var(--blue);border-color:var(--blue-line)}
.sys-lang{display:flex;flex-wrap:wrap;gap:8px;max-width:280px;justify-content:center;align-items:center}
.sys-lang span{font-family:var(--serif);font-weight:600;font-size:.9rem;color:var(--mut)}
.sys-lang .sys-lang-key{font-family:var(--mono);font-weight:600;font-size:.72rem;color:var(--blue);border:1px solid var(--blue-line);border-bottom-width:3px;border-radius:8px;background:var(--kc-face);padding:5px 12px}
.sys-file{position:relative;width:240px;border:1px solid var(--line2);border-radius:12px;background:var(--card);padding:22px 16px 14px;font-size:.66rem;color:var(--mut);letter-spacing:.04em}
.sf-tab{position:absolute;top:-9px;left:12px;background:var(--paper2);padding:0 8px;color:var(--blue);font-size:.58rem;font-weight:600}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{max-width:880px;margin:0 auto;padding:0 24px}
.faq-list details{border-top:1px solid var(--line2)}
.faq-list details:last-child{border-bottom:1px solid var(--line2)}
.faq-list summary{display:flex;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:20px 4px;font-family:var(--serif);font-weight:600;font-size:1.08rem;transition:color .15s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--blue)}
.faq-q{color:var(--blue);letter-spacing:.14em;flex:none;font-weight:600}
.faq-tick{margin-left:auto;position:relative;width:12px;height:12px;flex:none}
.faq-tick::before,.faq-tick::after{content:"";position:absolute;background:var(--mut);transition:transform .25s var(--ease)}
.faq-tick::before{left:0;right:0;top:5px;height:2px}
.faq-tick::after{top:0;bottom:0;left:5px;width:2px}
.faq-list details[open] .faq-tick::after{transform:scaleY(0)}
.faq-list details p{padding:0 4px 22px;color:var(--mut);max-width:68ch}
.faq-list details p code{font-family:var(--mono);font-size:.85em;color:var(--mut)}

/* ==========================================================================
   PAYOFF
   ========================================================================== */
.fin{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:calc(100vh - 60px);min-height:calc(100svh - 60px);
  padding:110px 24px 90px;border-top:1px solid var(--line);overflow:hidden;
  background:
    repeating-linear-gradient(180deg,transparent 0 31px,var(--finrule) 31px 32px),
    var(--paper);
}
.fin-h{font-size:clamp(44px,8.4vw,128px);line-height:1}
.fin-cta{display:inline-flex;align-items:center;margin-top:52px;text-decoration:none;position:relative}
.fin-combo{display:inline-flex;align-items:center;transition:opacity .4s var(--ease),transform .45s var(--ease)}
.fin-wide{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);
  white-space:nowrap;opacity:0;color:#fff;background:linear-gradient(180deg,var(--btn),#1d52c9);
  border-color:#1d52c9;border-bottom-color:#16409e;
  transition:opacity .35s var(--ease),transform .45s var(--snap);
  pointer-events:none;
}
.fin.morphed .fin-combo{opacity:0;transform:scale(.72)}
.fin.morphed .fin-wide{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fin-cta:hover .fin-wide{background:linear-gradient(180deg,var(--btn-hov),#1d52c9)}
.fin-cta:active .fin-wide{transform:translate(-50%,-50%) scale(1) translateY(3px);border-bottom-width:1px}
.fin-note{margin-top:34px;letter-spacing:.2em;color:var(--faint);font-size:.64rem}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--paper2);padding:32px clamp(16px,4vw,44px) 24px}
.foot-grid{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:9px}
.foot-brand b{font-size:.94rem}
.foot-links{display:flex;gap:20px;margin-left:auto}
.foot-links a{color:var(--mut);text-decoration:none;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem;padding:10px 2px;transition:color .15s}
.foot-links a:hover{color:var(--blue)}
.foot-copy{margin-top:18px;color:var(--faint);font-size:.58rem;letter-spacing:.1em}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:979px){
  .t-track{height:440vh;height:440svh}
  .bar{background:var(--paper)}
  .t-cap-hero{left:20px;right:20px;top:calc(var(--nav-h) + 22px);max-width:none}
  .t-h1{font-size:clamp(32px,8.8vw,54px)}
  .t-lead{margin-top:12px;font-size:.94rem}
  .t-cta{margin-top:16px}
  .t-cta .btn{padding:11px 15px;font-size:.88rem}
  .sheet{right:50%;transform:translateX(50%);top:auto;bottom:2vh;width:min(88vw,470px)}
  .sh-card{min-height:31vh}
  .sh-body{font-size:.78rem;line-height:1.6;padding:12px 14px}
  .typist[data-scene="0"] .sheet{opacity:.95}
  .t-cap-side{left:20px;right:20px;top:calc(var(--nav-h) + 26px);max-width:none;text-align:center}
  .t-cap[data-cap="3"]{top:calc(var(--nav-h) + 14px)}
  .t-cap-end{left:20px;right:20px;top:calc(var(--nav-h) + 30px);max-width:none;text-align:center;transform:translateY(10px)}
  .typist[data-scene="4"] .t-cap-end{transform:none}
  .t-cap-end .t-cta{justify-content:center}
  .meter{
    left:auto;right:6vw;top:auto;bottom:calc(2vh + 31vh + 10px);transform:none;gap:12px;
    background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:6px 10px;
  }
  .m-row b{font-size:.84rem}
  .bigkeys{left:50%;top:34%}
  .chip-big{left:50%;top:30%}
  .palette{left:50%;top:44%;transform:translate(-50%,-50%) scale(.94)}
  .desk-grid{grid-template-columns:1fr}
  .dm-hint{flex-basis:100%;margin-left:0;order:3}
  .cap-stage{grid-template-columns:1fr;gap:18px}
  .both-stage{grid-template-columns:1fr;gap:14px}
  .both-chip{order:-1;justify-self:center;margin-bottom:2px}
  .both-stage.to-g .both-chip{transform:translateY(90px) scale(.6)}
  .both-stage.to-l .both-chip{transform:translateY(300px) scale(.6)}
  .loc-map{grid-template-columns:1fr}
  .loc-flow{flex-direction:column}
  .loc-link{width:0;height:32px;border-top:0;border-left:1.5px dashed var(--blue-line)}
  .loc-link::after{content:"▾";right:auto;left:-5px;top:auto;bottom:-4px}
  .sys-row{grid-template-columns:1fr;gap:16px;padding:30px 0}
  .sys-num{padding-top:0}
  .sys-viz{justify-self:start;align-items:flex-start}
  .sys-cats{justify-content:flex-start}
  .wall-out{grid-template-columns:repeat(2,1fr)}
  .wall-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .fin{min-height:auto;padding:90px 20px 80px}
  .keycap.xl{padding:16px 26px;font-size:1.2rem}
}
@media (max-width:560px){
  .wall-out{grid-template-columns:1fr 1fr}
  .m-times{display:none}
  .ex-cmdrow{flex-direction:column;gap:14px}
}
/* short desktop viewports */
@media (max-height:640px) and (min-width:980px){
  .t-cap-hero{top:calc(var(--nav-h) + 16px)}
  .t-h1{font-size:clamp(32px,4.4vw,58px)}
  .t-lead{margin-top:12px}
  .t-cta{margin-top:16px}
  .sheet{top:16vh}
  .sh-card{min-height:62vh}
}

/* ==========================================================================
   NO-JS — the story reads as a static document
   ========================================================================== */
.no-js .t-track{height:auto}
.no-js .t-stage{position:relative;height:auto;overflow:visible;padding:110px 24px 60px}
.no-js .t-cap,.no-js .sheet{position:static;opacity:1 !important;transform:none !important;pointer-events:auto}
.no-js .t-cap-hero{margin-bottom:36px}
.no-js .t-cap-side{margin:26px 0 10px}
.no-js .sheet{width:min(92vw,540px);margin:24px 0}
.no-js .sh-card{min-height:auto}
.no-js .sh-ghost,.no-js .meter,.no-js .bigkeys,.no-js .shards,.no-js .chip-big,.no-js .palette{display:none}
.no-js #tTyped::before{content:"Hi Sarah,\A\AThanks for reaching out — happy to help with this. Could we do Thursday at 2:00 PM? I'll send over a calendar invite and a short agenda beforehand. Happy to adjust.\A\ABest,\A Alex";white-space:pre-wrap}
.no-js .t-cap[data-cap="2"] h2::after{content:" ALT+A."}
.no-js .t-cap-end{margin-top:30px}
.no-js .dm-body::before{content:"The interactive demo needs JavaScript — in Gmail, the real extension does this with Alt+A." !important;color:var(--faint)}
.no-js .ex-mail{transform:none;opacity:1}
.no-js .wall-stage .wm,.no-js .wall-stage .tcard{opacity:1;transform:none}
.no-js .cap-pill,.no-js .cap-card,.no-js .cc-save{opacity:1;transform:none}
.no-js .cap-sel{background-size:100% 100%}
.no-js .fin .fin-combo{display:none}
.no-js .fin .fin-wide{position:static;opacity:1;transform:none;pointer-events:auto}

/* ==========================================================================
   REDUCED MOTION — same states, no choreography
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .t-stage *,.t-cap,.sheet,.sh-ghost,.shard,.chip-big,.palette,.bigkeys,
  .wm,.tcard,.cap-sel,.cap-pill,.cap-card,.both-chip,.ex-mail,
  .btn,.keycap,.fin-combo,.fin-wide,
  .tok-i,.tok-i.resolved,.dm-log li,.faq-tick::before,.faq-tick::after{transition:none !important;animation:none !important}
  .cursor{animation:none !important}
  .ex-mail .tok{animation:none !important}
}
/* touch-specific demo copy */
.touch-only{display:none}
@media (pointer:coarse){
  .touch-only{display:inline}
  .kbd-only{display:none}
}