/* Animated product demo: an HTML recreation of the app, crisp at any size. */
.demo {
  --app-bg: #ffffff; --app-side: #f3f3f6; --app-bar: #f6f6f8; --app-tile: #f7f7f9; --app-line: rgba(0,0,0,.08);
  --app-text: #1d1d1f; --app-muted: #86868b; --app-accent: #0a66d6; --app-panel: #ffffff;
  position: relative; max-width: 1000px; margin: 56px auto 0; aspect-ratio: 1000 / 620;
  perspective: 1800px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo {
    --app-bg: #1e1e21; --app-side: #252528; --app-bar: #2a2a2d; --app-tile: #2a2a2e; --app-line: rgba(255,255,255,.08);
    --app-text: #f5f5f7; --app-muted: #98989d; --app-accent: #3b8cff; --app-panel: #232326;
  }
}
.demo-stage { position: absolute; top: 0; left: 0; width: 1000px; height: 620px; transform-origin: 0 0; }

/* Window, folded like paper then opened */
.dw { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: var(--app-bg); color: var(--app-text);
  border: 1px solid var(--app-line); box-shadow: var(--shadow); font: 13px/1.35 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  transform-origin: 50% 0; transform: rotateX(-92deg) scale(.82); opacity: 0;
  transition: transform .95s cubic-bezier(.2,1.25,.35,1), opacity .3s ease; }
.demo.unfold .dw { transform: none; opacity: 1; }
.dw::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 18%, rgba(0,0,0,.12) 50%, transparent 52%, rgba(0,0,0,.1) 80%, transparent 82%);
  opacity: 1; transition: opacity 1.2s ease .5s; }
.demo.unfold .dw::after { opacity: 0; }

.dw-bar { height: 46px; display: flex; align-items: center; padding: 0 16px; gap: 8px; background: var(--app-bar); border-bottom: 1px solid var(--app-line); }
.dw-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dw-bar i:nth-child(1) { background: #ff5f57; } .dw-bar i:nth-child(2) { background: #febc2e; } .dw-bar i:nth-child(3) { background: #28c840; }
.dw-title { margin-left: 140px; font-weight: 650; font-size: 14px; }
.dw-title small { display: block; font-weight: 400; color: var(--app-muted); font-size: 11px; }
.dw-search { margin-left: auto; width: 230px; height: 28px; border-radius: 8px; background: var(--app-tile); border: 1px solid var(--app-line);
  color: var(--app-muted); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; }
.dw-search svg { width: 13px; height: 13px; flex: none; }

.dw-body { position: absolute; top: 46px; bottom: 0; left: 0; right: 0; display: flex; }
.dw-side { width: 200px; background: var(--app-side); border-right: 1px solid var(--app-line); padding: 12px 10px; }
.dw-side .it { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 13px;
  opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .35s; }
.dw-side .it b { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.dw-side .it em { margin-left: auto; font-style: normal; color: var(--app-muted); font-size: 12px; }
.dw-side .it.sel { background: var(--app-accent); color: #fff; }
.dw-side .it.sel em { color: rgba(255,255,255,.8); }
.dw-side .hd { color: var(--app-muted); font-size: 11px; font-weight: 600; padding: 12px 8px 4px; opacity: 0; transition: opacity .35s; }
.demo.cascade .dw-side .it, .demo.cascade .dw-side .hd { opacity: 1; transform: none; }

.dw-main { flex: 1; padding: 18px 20px; position: relative; }
.dw-cat { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; margin-bottom: 12px; opacity: 0; transition: opacity .4s; }
.dw-cat span { color: var(--app-muted); font-weight: 400; font-size: 12px; }
.demo.cascade .dw-cat { opacity: 1; }
.dw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { min-height: 74px; }
.tile { display: flex; gap: 10px; padding: 11px; border-radius: 11px; background: var(--app-tile); border: 1px solid var(--app-line);
  opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .3s, transform .4s cubic-bezier(.2,1.3,.4,1), box-shadow .2s, background .2s; }
.demo.cascade .tile { opacity: 1; transform: none; }
.tile .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); box-shadow: 0 2px 6px color-mix(in srgb, var(--c) 35%, transparent); }
.tile .ic svg { width: 20px; height: 20px; }
.tile b { display: block; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.tile small { display: block; color: var(--app-muted); font-size: 11px; line-height: 1.3; margin-top: 2px; }
.tile.hot { background: color-mix(in srgb, var(--app-accent) 12%, var(--app-tile)); box-shadow: 0 0 0 2px var(--app-accent); }
.tile.press { transform: scale(.97); }

/* Tool window that opens on top */
.tw { position: absolute; left: 230px; top: 72px; width: 640px; height: 430px; border-radius: 13px; overflow: hidden; z-index: 5;
  background: var(--app-panel); border: 1px solid var(--app-line); box-shadow: 0 30px 80px rgba(0,0,0,.28), 0 2px 10px rgba(0,0,0,.12);
  opacity: 0; transform: scale(.88) translateY(20px); transition: opacity .35s, transform .5s cubic-bezier(.2,1.3,.4,1); }
.demo.tool .tw { opacity: 1; transform: none; }
.tw .dw-bar { height: 40px; }
.tw .tw-title { display: flex; align-items: center; gap: 8px; margin-left: 12px; font-weight: 650; font-size: 13px; }
.tw .tw-title .ic { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); }
.tw .tw-title .ic svg { width: 12px; height: 12px; }
.tw-body { position: absolute; top: 40px; bottom: 58px; left: 0; right: 0; display: flex; }
.tw-files { flex: 1; padding: 16px; position: relative; }
.drop { position: absolute; inset: 16px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--app-muted) 60%, transparent);
  display: grid; place-items: center; text-align: center; color: var(--app-muted); font-size: 13px; transition: opacity .3s, border-color .2s, background .2s; }
.drop svg { width: 34px; height: 34px; margin: 0 auto 8px; display: block; opacity: .7; }
.demo.hover-drop .drop { border-color: var(--app-accent); background: color-mix(in srgb, var(--app-accent) 7%, transparent); }
.demo.dropped .drop { opacity: 0; }
.frow { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; gap: 12px; align-items: center; padding: 10px;
  border-radius: 10px; border: 1px solid var(--app-line); background: var(--app-tile); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.demo.dropped .frow { opacity: 1; transform: none; }
.thumb { width: 54px; height: 38px; border-radius: 6px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ffb35c 0%, #ff6f61 45%, #6a5cff 100%); }
.thumb::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(20,40,90,.55)); }
.thumb::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff6c9; top: 8px; right: 12px; box-shadow: 0 0 8px #fff6c9; }
.frow .meta { flex: 1; min-width: 0; }
.frow .meta b { font-size: 12.5px; display: block; }
.frow .meta small { color: var(--app-muted); font-size: 11.5px; }
.frow .meta small .after { color: #28a745; font-weight: 600; }
.bar-p { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--app-muted) 25%, transparent); margin-top: 6px; overflow: hidden; }
.bar-p > div { height: 100%; width: 0; background: var(--app-accent); border-radius: 3px; }
.ok { width: 22px; height: 22px; border-radius: 50%; background: #28c840; color: #fff; display: grid; place-items: center; flex: none;
  transform: scale(0); transition: transform .4s cubic-bezier(.2,1.6,.4,1); }
.demo.done .ok { transform: scale(1); }
.tw-opts { width: 210px; border-left: 1px solid var(--app-line); background: var(--app-side); padding: 14px; font-size: 12px; }
.tw-opts .lbl { color: var(--app-muted); font-weight: 600; font-size: 11px; margin: 4px 0 6px; }
.seg { display: flex; background: var(--app-tile); border: 1px solid var(--app-line); border-radius: 7px; padding: 2px; margin-bottom: 12px; }
.seg span { flex: 1; text-align: center; padding: 4px 0; border-radius: 5px; font-size: 11px; }
.seg span.on { background: var(--app-bg); box-shadow: 0 1px 2px rgba(0,0,0,.15); font-weight: 600; }
.opt { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--app-line); }
.opt i { font-style: normal; color: var(--app-muted); }
.tw-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; display: flex; align-items: center; padding: 0 16px;
  border-top: 1px solid var(--app-line); background: var(--app-bar); font-size: 12px; color: var(--app-muted); gap: 8px; }
.tw-foot .go { margin-left: auto; background: var(--app-accent); color: #fff; font-weight: 600; padding: 8px 18px; border-radius: 8px; font-size: 13px;
  transition: transform .15s, filter .2s; }
.tw-foot .go.press { transform: scale(.94); filter: brightness(.9); }

/* Flying file, cursor and toast */
.fly { position: absolute; z-index: 8; left: 1040px; top: 250px; width: 200px; display: flex; gap: 10px; align-items: center; padding: 9px 12px;
  border-radius: 12px; background: var(--app-panel); color: var(--app-text); border: 1px solid var(--app-line); box-shadow: 0 16px 40px rgba(0,0,0,.25);
  font: 12px -apple-system, sans-serif; transform: rotate(6deg); opacity: 0;
  transition: left .7s cubic-bezier(.3,.8,.3,1), top .7s cubic-bezier(.3,.8,.3,1), transform .7s, opacity .2s; }
.fly b { display: block; font-size: 12.5px; }
.fly small { color: var(--app-muted); }
.demo.flying .fly { opacity: 1; }
.cursor { position: absolute; z-index: 10; width: 22px; height: 30px; left: 1060px; top: 660px;
  transition: left .6s cubic-bezier(.45,.05,.25,1), top .6s cubic-bezier(.45,.05,.25,1), transform .12s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cursor.click { transform: scale(.82); }
.toast { position: absolute; z-index: 9; left: 50%; bottom: 26px; transform: translate(-50%, 30px); opacity: 0; display: flex; gap: 10px; align-items: center;
  padding: 11px 18px; border-radius: 12px; background: color-mix(in srgb, var(--app-panel) 88%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--app-line); box-shadow: 0 16px 40px rgba(0,0,0,.22); color: var(--app-text); font: 13px -apple-system, sans-serif;
  transition: opacity .35s, transform .5s cubic-bezier(.2,1.3,.4,1); white-space: nowrap; }
.toast .ok { transform: scale(1); }
.toast b { font-weight: 650; }
.demo.toasted .toast { opacity: 1; transform: translate(-50%, 0); }
.demo.fade .demo-stage { opacity: 0; transition: opacity .6s; }
.demo-stage { transition: opacity .4s; }

@media (prefers-reduced-motion: reduce) {
  .demo *, .demo *::after { transition: none !important; }
}

/* Scene label under the window */
.scene-label { position: absolute; left: 50%; top: -38px; transform: translate(-50%, 6px); opacity: 0; z-index: 12;
  font: 600 14px -apple-system, sans-serif; color: var(--muted); letter-spacing: .01em; transition: opacity .3s, transform .3s; white-space: nowrap; }
.scene-label::before { content: "Démo · "; font-weight: 500; opacity: .7; }
.demo.labeled .scene-label { opacity: 1; transform: translate(-50%, 0); }
.tw-col { display: flex; flex-direction: column; gap: 12px; }
.tw-col .frow { position: static; opacity: 1; transform: none; }

/* Remove background */
.cut-photo { position: absolute; inset: 16px; border-radius: 12px; overflow: hidden; }
.cut-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #8fc7ff 0%, #cfe7ff 55%, #e9d3b4 55%, #d9b98f 100%); transition: opacity .6s; }
.cut-bg::after { content: ""; position: absolute; left: 12%; top: 18%; width: 70px; height: 26px; border-radius: 20px; background: rgba(255,255,255,.85);
  box-shadow: 160px 30px 0 -4px rgba(255,255,255,.7); }
.cut-check { position: absolute; inset: 0; opacity: 0; transition: opacity .6s;
  background: repeating-conic-gradient(#e8e8ec 0 25%, #ffffff 0 50%) 0 0 / 22px 22px; }
.demo.cutout .cut-bg { opacity: 0; }
.demo.cutout .cut-check { opacity: 1; }
.plant { position: absolute; left: 50%; bottom: 22px; width: 150px; height: 230px; transform: translateX(-50%); transition: filter .5s; }
.demo.cutout .plant { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
.pot { position: absolute; bottom: 0; left: 30px; width: 90px; height: 70px; background: linear-gradient(180deg, #e0794e, #b9532c);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); border-radius: 4px; }
.pot::before { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 14px; background: #ef8c60; }
.stem { position: absolute; bottom: 64px; left: 72px; width: 6px; height: 90px; background: #3f8f4a; border-radius: 3px; }
.leaf { position: absolute; width: 70px; height: 34px; background: linear-gradient(135deg, #5fcf6e, #2f9b45); border-radius: 0 60px 0 60px; }
.l1 { bottom: 140px; left: 78px; transform: rotate(-20deg); }
.l2 { bottom: 118px; left: 4px; transform: rotate(200deg) scaleY(-1); }
.l3 { bottom: 165px; left: 30px; width: 60px; transform: rotate(-70deg); }
.cut-scan { position: absolute; top: 0; bottom: 0; width: 80px; left: -90px;
  background: linear-gradient(90deg, transparent, rgba(59,140,255,.45), transparent); }
.demo.scan .cut-scan { animation: scanline 1.1s ease-in-out forwards; }
@keyframes scanline { to { left: 110%; } }

/* Sign a PDF */
.paper { position: absolute; inset: 14px 60px; background: #fff; color: #1d1d1f; border-radius: 4px; padding: 22px 26px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.paper h4 { margin: 0 0 14px; font-size: 14px; }
.paper p { height: 7px; border-radius: 4px; background: #e6e6ea; margin: 0 0 9px; }
.paper p.s { width: 62%; margin-bottom: 16px; }
.sig-line { position: absolute; left: 26px; right: 26px; bottom: 22px; border-top: 1px solid #c9c9cf; height: 54px; }
.sig { position: absolute; left: 0; bottom: 6px; width: 190px; height: 60px; fill: none; stroke: #1a3d8f; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 700; stroke-dashoffset: 700; }
.demo.signing .sig { transition: stroke-dashoffset 1.2s ease-in-out; stroke-dashoffset: 0; }
.date { position: absolute; right: 0; top: 10px; font: 12px -apple-system, sans-serif; color: #6e6e73; opacity: 0; transition: opacity .3s; }
.demo.dated .date { opacity: 1; }
.sig-card { background: #fff; border-radius: 8px; border: 1px solid var(--app-line); padding: 6px; margin-bottom: 12px; transition: box-shadow .2s; }
.sig-card svg { width: 100%; height: 40px; fill: none; stroke: #1a3d8f; stroke-width: 3.5; stroke-linecap: round; }
.sig-card.press { box-shadow: 0 0 0 2px var(--app-accent); }

/* Transcribe */
.thumb.audio { background: linear-gradient(135deg, #a78bfa, #6d4bf0); }
.thumb.audio::after { display: none; }
.frow.on { opacity: 1; transform: none; position: static; }
.wave { height: 70px; display: flex; align-items: center; gap: 3px; padding: 0 4px; }
.wave i { flex: 1; height: var(--h); border-radius: 3px; background: color-mix(in srgb, var(--app-accent) 55%, transparent); transform-origin: center; }
.demo.listening .wave i { animation: bounce .55s ease-in-out infinite alternate; animation-delay: var(--d); background: var(--app-accent); }
@keyframes bounce { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.lines p { margin: 0 0 8px; font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.lines p.in { opacity: 1; transform: none; }
.lines em { font-style: normal; color: var(--app-muted); font-variant-numeric: tabular-nums; margin-right: 10px; font-size: 11.5px; }

/* Storage */
.disk span { font-weight: 650; font-size: 12.5px; }
.disk small { color: var(--app-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.disk-bar { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--app-muted) 22%, transparent); overflow: hidden; margin: 6px 0 4px; }
.disk-bar > div { height: 100%; width: 88%; background: linear-gradient(90deg, #3b8cff, #9b6bf2, #ff5f7e); border-radius: 5px; }
.hog { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--app-tile); border: 1px solid var(--app-line);
  font-size: 12px; transition: opacity .4s, transform .4s, background .2s; }
.hog b { width: 150px; font-weight: 600; }
.hog em { font-style: normal; color: var(--app-muted); width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.hb { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--app-muted) 20%, transparent); overflow: hidden; }
.hb i { display: block; height: 100%; background: var(--app-accent); border-radius: 3px; }
.cb { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid color-mix(in srgb, var(--app-muted) 70%, transparent); flex: none; position: relative; }
.hog.on .cb { background: var(--app-accent); border-color: var(--app-accent); }
.hog.on .cb::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hog.gone { opacity: .25; transform: translateX(8px); }

/* Drop zone icon size in the new markup */
.drop svg { width: 34px; height: 34px; }
.tw .go { transition: transform .15s, filter .2s, background .2s; }

.tw-foot svg { width: 14px; height: 14px; flex: none; }
.tw-foot { white-space: nowrap; }
.tw-foot .go { white-space: nowrap; }