/* The demo after the hero: the promo video's scene, drawn and played in the browser. A Mac screen
   (760 × 475 units, scaled to fit) with Mail, a notification, the DotMD window, the agent's terminal as
   glass plates over it, and a pointer. demo.js moves it along a timeline; this file is every state. */

.demo { padding-top: 24px; }
/* the text on top, the scene below at the panel's full width */
.demo .panel { background: var(--panel); border-radius: 36px; padding: 40px 40px 48px; }
.demo .demo-text { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; margin-top: 40px; }
.demo .demo-text .lead { margin-top: 14px; max-width: 560px; }
.demo .demo-steps { padding-top: 10px; }
@media (max-width: 900px) { .demo .panel { padding: 20px 20px 32px; } .demo .demo-text { grid-template-columns: 1fr; gap: 24px; } }
.demo-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 15px; }
.demo-steps li { display: flex; align-items: center; gap: 10px; transition: color .3s; }
.demo-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.demo-steps li.on { color: var(--text); font-weight: 600; }
.demo-steps li.on::before { background: var(--blue); }

.scene-box { width: 100%; aspect-ratio: 760 / 475; position: relative; overflow-x: clip; }
.scene { position: absolute; left: 0; top: 0; width: 760px; height: 475px; transform-origin: 0 0; font: 11px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; color: var(--text); }
.scene .hid { opacity: 0 !important; pointer-events: none; }
/* the desktop: a wallpaper photo, like a real Mac */
.screen { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background: #c1441e url(/wallpaper.jpg) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(17,19,24,.14), 0 20px 50px -20px rgba(17,19,24,.35); transition: filter .5s, opacity .5s; }
.screen.dim { filter: blur(5px); opacity: .6; }
.scene .dots { display: flex; gap: 5px; }
.scene .dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.scene .dots i:nth-child(2) { background: #febc2e; } .scene .dots i:nth-child(3) { background: #28c840; }
.scene .av { width: 16px; height: 16px; border-radius: 50%; background: var(--text); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex: none; }
.scene .av.ag { background: var(--agent); color: transparent; position: relative; }
.scene .caret { display: inline-block; width: 1.5px; height: 12px; background: var(--blue); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: 0; } }
.scene .pill { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 10px; border-radius: 11px; font-size: 10.5px; font-weight: 600; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); white-space: nowrap; transition: transform .15s; }
.scene .pill.dark { background: var(--text); color: var(--bg); box-shadow: none; }
.scene .pill.pressed { transform: scale(.94); }

/* Mail, behind everything, where the user is typing */
.scene .mail { position: absolute; left: 300px; top: 70px; width: 420px; height: 300px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 .5px rgba(17,19,24,.3), 0 10px 24px rgba(17,19,24,.12); overflow: hidden; transition: opacity .4s; }
.scene .mail .mbar { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 11px; }
.scene .mail .mf { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.scene .mail .mf span { width: 48px; color: var(--muted); }
.scene .mail .mbody { padding: 14px 16px; font-size: 12px; line-height: 1.6; }

/* macOS notification */
.scene .notif { position: absolute; right: 14px; top: 12px; width: 300px; height: 62px; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 12px; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(20px); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 10px 30px rgba(17,19,24,.24); transform: translateX(340px); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .3s; z-index: 5; }
.scene .notif.in { transform: none; }
.scene .notif img { width: 34px; height: 34px; border-radius: 8px; }
.scene .notif b { display: block; font-size: 11px; } .notif span { font-size: 10.5px; color: var(--muted); }
.scene .notif em { position: absolute; right: 12px; top: 8px; font-style: normal; font-size: 9px; color: var(--muted); }

/* the DotMD window */
.app { position: absolute; left: 30px; top: 24px; width: 700px; height: 430px; border-radius: 12px; background: var(--bg); overflow: hidden; box-shadow: 0 0 0 .5px rgba(17,19,24,.28), 0 14px 28px rgba(17,19,24,.08), 0 40px 80px rgba(17,19,24,.12); display: grid; grid-template-columns: 150px 1fr 192px; grid-template-rows: minmax(0, 1fr); transform: scale(.92); opacity: 0; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.app.in { transform: none; opacity: 1; }
.app .sb { background: var(--panel); border-right: 1px solid var(--line); padding: 10px 8px; min-width: 0; overflow: hidden; }
.app .sb-title { font-weight: 600; font-size: 11px; margin: 12px 4px 6px; }
.app .needs { overflow: hidden; max-height: 70px; transition: max-height .35s, opacity .3s; margin: 0 -2px 4px; }
.app .needs.out { max-height: 0; opacity: 0; }
.app .sec { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 4px 6px 4px; }
.app .needs-row { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; background: var(--blue-soft); }
.app .needs-row b { display: block; font-size: 10.5px; } .app .needs-row span:not(.av) { font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 110px; }
.app .tree .f { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; font-size: 10.5px; white-space: nowrap; }
.app .tree .f.l1 { padding-left: 18px; } .app .tree .f.l2 { padding-left: 30px; }
.app .tree .f.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.app .tree .chev { width: 7px; font-size: 8px; color: var(--muted); }
.app .tree .ico { width: 11px; height: 11px; background: currentColor; opacity: .55; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.app .tree .f.on .ico { opacity: 1; }
.app .tree .ico.file { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 1h5l3 3v9H3z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8 1v3h3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E"); }
.app .tree .ico.folder { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 3.5h4l1.5 1.5h5.5v6h-11z' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); opacity: .8; }
.app .main { display: flex; flex-direction: column; min-width: 0; position: relative; }
.app .tb { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.app .tb .nav { color: var(--muted); letter-spacing: 2px; }
.app .tb .fname b { display: block; font-size: 11px; } .app .tb .fname span { font-size: 9px; color: var(--muted); }
.app .tb-icons { margin-left: auto; display: flex; gap: 4px; }
.app .tb-icons span { height: 22px; padding: 0 5px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); font-size: 10.5px; font-weight: 600; position: relative; }
.app .tb-icons svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app .tb-icons svg.sm { width: 7px; height: 7px; }
.app .tb-icons .rev { background: var(--blue-soft); color: var(--blue); }
.app .tb-icons .rev i { position: absolute; right: -5px; top: -6px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #ff3b30; color: #fff; font-size: 9px; font-style: normal; line-height: 15px; text-align: center; box-shadow: 0 0 0 1.5px var(--bg); transition: transform .2s; }
.app .tb-icons .rev i:empty { display: none; }
.app .tb-icons .rev i.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; right: 0; top: 0; }
.app .tabs { height: 24px; display: flex; gap: 4px; padding: 0 8px; align-items: center; border-bottom: 1px solid var(--line); }
.app .tabs span { flex: 1; min-width: 0; height: 18px; line-height: 18px; border-radius: 5px; display: block; padding: 0 8px; text-overflow: ellipsis; font-size: 9.5px; color: var(--muted); background: rgba(0,0,0,.035); white-space: nowrap; overflow: hidden; }
.app .tabs span.on { background: var(--bg); color: var(--blue); font-weight: 600; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.app .doc { padding: 34px 22px 18px; position: relative; flex: 1; overflow: hidden; }
.app .doc h4 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.app .doc .meta { display: flex; gap: 5px; margin-top: 6px; }
.app .doc .meta span { height: 16px; padding: 0 6px; border-radius: 4px; background: var(--panel-2); font-size: 9px; line-height: 16px; color: var(--muted); }
.app .doc .meta b { color: var(--text); }
.app .doc h5 { margin: 14px 0 3px; font-size: 13px; letter-spacing: -.01em; }
.app .doc p { margin: 0; font-size: 11px; line-height: 1.6; position: relative; }
.app .doc .blk { position: relative; }   /* the comment popover hangs under the paragraph */
.app .doc .blk .new { display: none; }
.app .doc .blk.diff .old { background: var(--red-soft); border-left: 2.5px solid var(--red); padding: 2px 6px; border-radius: 3px; text-decoration: line-through; text-decoration-color: var(--red); color: var(--muted); margin-bottom: 3px; max-height: 60px; overflow: hidden; transition: max-height .35s, opacity .35s, margin .35s, padding .35s; }
.app .doc .blk.diff .new { display: block; background: var(--green-soft); border-left: 2.5px solid var(--green); padding: 2px 6px; border-radius: 3px; transition: background .5s, border-color .5s, padding .5s; }
.app .doc .blk.diff.ok .old { max-height: 0; opacity: 0; margin: 0; padding: 0 6px; }
.app .doc .blk.diff.ok .new { background: transparent; border-color: transparent; padding: 0; }
.app .doc .pass { position: relative; z-index: 0; }
.app .doc .pass .selbg { position: absolute; left: 0; top: -1px; bottom: -1px; width: 0; background: rgba(10,124,255,.22); border-radius: 2px; transition: width .35s cubic-bezier(.4,0,.3,1); z-index: -1; }
.app .doc .pass.sel .selbg { width: 100%; }
.app .doc .pass.marked { background: rgba(255,204,0,.35); box-shadow: 0 1.5px 0 #e6b800; border-radius: 2px; }
.app .doc .pass.marked .selbg { width: 0; }
.app .doc .doc-hl { position: relative; z-index: 0; }
/* the comment popover, under its passage */
.app .pop { position: absolute; left: 0; top: calc(100% + 10px); width: 250px; z-index: 6; display: block; background: var(--bg); border-radius: 9px; padding: 10px; box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 12px 28px rgba(17,19,24,.16); opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .25s, transform .25s; pointer-events: none; }
.app .pop.in { opacity: 1; transform: none; }
.app .pop::before { content: ""; position: absolute; left: 24px; top: -5px; width: 10px; height: 10px; background: var(--bg); transform: rotate(45deg); box-shadow: -.5px -.5px 0 rgba(0,0,0,.12); }
.app .pop .ph { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 10.5px; }
.app .pop .ph em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--muted); font-size: 9px; }
.app .pop .pq { display: block; margin-top: 7px; padding-left: 6px; border-left: 2px solid #c8ccd4; color: var(--muted); font-size: 9.5px; }
.app .pop .pin { display: flex; align-items: center; height: 26px; margin-top: 7px; padding: 0 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--blue), 0 0 0 3px rgba(10,124,255,.22); font-size: 11px; }
.app .pop .pb { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; font-size: 10px; color: var(--muted); }
.app .pop .pb b { height: 22px; padding: 0 12px; border-radius: 6px; background: linear-gradient(180deg, #3d95ff, var(--blue)); color: #fff; display: inline-flex; align-items: center; transition: transform .15s; }
.app .pop .pb b.pressed { transform: scale(.94); }
/* the banner over the page */
.app .banner { position: absolute; left: 10px; right: 10px; top: 6px; transform: translateY(-14px); opacity: 0; z-index: 4; justify-content: space-between; height: 28px; padding: 0 4px 0 9px; border-radius: 14px; display: flex; align-items: center; gap: 5px; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); box-shadow: 0 0 0 .5px rgba(17,19,24,.16), 0 8px 24px rgba(17,19,24,.14); font-size: 9.5px; font-weight: 600; white-space: nowrap; transition: opacity .3s, transform .3s; }
.app .banner.in { opacity: 1; transform: none; }
/* the banner's title gives way to its buttons on long languages (demo.js wraps it in .bt) */
.app .banner .bt { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app .banner span { margin-right: auto; flex-shrink: 0; }
.app .banner span { font-weight: 500; color: var(--muted); }
.app .banner b { flex-shrink: 0; height: 20px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; box-shadow: 0 0 0 1px rgba(0,0,0,.14); font-size: 10px; }
.app .banner b.dk { background: var(--text); color: var(--bg); box-shadow: none; }
/* the comments pane */
.app .pane { background: var(--panel); border-left: 1px solid var(--line); position: relative; padding: 8px; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.app .sech { display: flex; align-items: center; height: 22px; padding: 0 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.app .sech em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 9.5px; }
.app .sech:empty, .app .sech.off { display: none; }
.app .card { background: var(--bg); border-radius: 8px; padding: 8px; margin-bottom: 7px; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(0,0,0,.05); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s, box-shadow .2s; }
.app .card.in { opacity: 1; transform: none; }
.app .card.hover { box-shadow: inset 0 0 0 1.5px var(--blue), 0 1px 3px rgba(0,0,0,.05); }
.app .card .ch { display: flex; align-items: center; gap: 5px; height: 16px; font-size: 10.5px; }
.app .card .ch b { font-weight: 600; white-space: nowrap; } .app .card .when { color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app .card .badge { margin-left: auto; font-size: 9px; color: var(--muted); display: none; align-items: center; gap: 3px; height: 16px; padding: 0 6px; border-radius: 8px; white-space: nowrap; }
.app .card .badge.rv { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.app .card .badge.ok { background: var(--green-soft); color: var(--green); font-weight: 600; }
.app .card.open .badge.line, .app .card.review .badge.rv, .app .card.resolved .badge.ok { display: inline-flex; }
.app .card.hover .badge { display: none !important; }
.app .card .hov { margin-left: auto; display: none; gap: 7px; color: var(--muted); font-size: 11px; }
.app .card.hover .hov { display: inline-flex; }
.app .card .hov .acc { color: var(--text); font-weight: 700; transition: transform .15s; }
.app .card .hov .acc.pressed { transform: scale(.8); }
.app .card .quote { margin-top: 6px; padding-left: 7px; border-left: 2px solid #c8ccd4; color: var(--muted); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .card .ctext { margin-top: 4px; font-size: 10.5px; font-weight: 500; }
.app .card.resolved .ctext { color: var(--muted); text-decoration: line-through; }
.app .card .note { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); font-size: 9.5px; color: var(--muted); display: none; }
.app .card.review .note, .app .card.resolved .note { display: block; }
/* the waiting bar */
.app .wbar { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: var(--panel); border-top: 1px solid var(--line); padding: 10px 10px; transition: transform .3s, opacity .3s; }
.app .wbar.out { transform: translateY(20px); opacity: 0; }
.app .wbar .wtitle { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 10px; white-space: nowrap; }
.app .wbar .wbtns { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: flex-end; gap: 6px; }
/* a long main button ("Send 2 Comments", longer in other languages) keeps its text: demo.js hides Stop Waiting when both don't fit */
.app .wbar .wbtns .pill { flex-shrink: 0; }
.app .toast { position: absolute; left: 50%; bottom: 76px; transform: translate(-50%, 8px); opacity: 0; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--text); color: var(--bg); font-size: 10px; font-weight: 600; display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: opacity .25s, transform .25s; z-index: 3; }
.app .toast.in { opacity: 1; transform: translate(-50%, 0); }

/* the agent's terminal: a glass plate over the screen */
.plate { position: absolute; left: 50%; top: 50%; width: 460px; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .35s, transform .35s; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px) saturate(1.3); border-radius: 16px; padding: 16px 18px; box-shadow: 0 0 0 1px rgba(17,19,24,.08), 0 24px 60px -10px rgba(17,19,24,.35); z-index: 8; }
.plate.in { opacity: 1; transform: translate(-50%, -50%); }
.plate .ph { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; margin-bottom: 10px; }
.plate .ask { display: inline-block; padding: 6px 10px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 12px; margin-bottom: 8px; }
.plate .reply { padding: 6px 10px; border-radius: 10px; background: var(--panel); font-size: 12px; margin-top: 8px; }
.plate .row { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(17,19,24,.04); margin-top: 6px; font-size: 11.5px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .plate .row { background: rgba(255,255,255,.06); } }
.plate .row code { font: 500 11px ui-monospace, "SF Mono", Menlo, monospace; }
.plate .row span { color: var(--muted); }
.plate .row em { margin-left: auto; font-style: normal; font-weight: 600; }
.plate .row em.add { color: var(--green); } .plate .row em .del { color: var(--red); margin-left: 4px; }
.plate .row em.blue { color: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.plate .row i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.plate .row i.spin { border: 1.5px solid rgba(10,124,255,.3); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.plate .row i.chk { background: var(--green); position: relative; }
.plate .row i.chk::after { content: ""; position: absolute; left: 3px; top: 3px; width: 4px; height: 2px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.plate .ask, .plate .row, .plate .reply { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.plate .in-row { opacity: 1 !important; transform: none !important; }

/* the pointer and its click */
.ptr { position: absolute; left: 0; top: 0; width: 16px; height: 20px; z-index: 12; opacity: 0; transition: left .65s cubic-bezier(.3,0,.15,1), top .65s cubic-bezier(.3,0,.15,1), opacity .25s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.ptr.in { opacity: 1; }
.ptr svg { width: 16px; height: 20px; display: block; }
.ripple { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(10,124,255,.18); box-shadow: 0 0 0 2px rgba(10,124,255,.7); opacity: 0; transform: scale(.2); z-index: 11; pointer-events: none; }
.ripple.go { animation: ripple .5s ease-out forwards; }
@keyframes ripple { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1); } }