.demo-invitation{margin-top:40px}.demo-cta-wrap{position:relative;display:inline-block;padding:0 88px 54px 0;max-width:100%}.demo-cta{display:flex;align-items:center;justify-content:space-between;gap:35px;background:#2c241f;color:#faf4ec;padding:23px 28px;min-height:90px;text-align:left;box-shadow:0 7px 0 #ddcbbd;transition:background .25s,transform .25s;max-width:100%}.demo-cta:hover{background:#4a3427;transform:translateY(-3px)}.demo-cta small{font-size:12px;color:#d5bba7;display:block;letter-spacing:.05em;margin-bottom:7px}.demo-cta strong{font-size:20px;letter-spacing:.01em;font-weight:600;line-height:1.5;display:block}.demo-play-icon{font:20px Arial,sans-serif;color:#e9bc9b}.demo-pointing-hand{position:absolute;right:0;bottom:0;width:150px;height:150px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 10px #43291621);animation:demo-hand-float 2.5s ease-in-out infinite}.demo-invitation[hidden],.creation-demo[hidden],.creation-demo [hidden]{display:none!important}@keyframes demo-hand-float{0%,100%{transform:translate(3px,7px) rotate(3deg)}50%{transform:translate(-2px,-3px) rotate(-2deg)}}
/* A single conversation viewport, sized like a phone on every screen. */
.creation-demo{width:100%;max-width:440px;margin:42px auto 0;color:#2c241f;scroll-margin-top:12px;animation:demo-open .6s var(--ease)}
.demo-phone{height:740px;height:min(760px,calc(100svh - 24px));min-height:460px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #cbb4a1;border-radius:24px;background:#f5eee5;box-shadow:0 18px 50px #5a3f2218}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 18px;border-bottom:1px solid #dfd3c6;background:#eee5da;flex-shrink:0}
.demo-header h2{font-size:14px;font-weight:650;line-height:1.6;letter-spacing:-.02em}.demo-header h2:focus{outline:none}.demo-header>span{font-size:11px;color:#776252;white-space:nowrap}
.demo-goal{padding:12px 18px;background:#2c241f;color:#f9f2e9;flex-shrink:0}.demo-goal>span{font-size:11px;letter-spacing:.05em;color:#deb593}.demo-goal p{font-size:14px;line-height:1.7;margin-top:3px}.demo-goal strong{font-weight:600;color:#ffe0b7}
.demo-steps{display:flex;margin:0;padding:11px 16px;gap:5px;border-bottom:1px solid #dfd3c6;background:#faf6ef;list-style:none;flex-shrink:0}.demo-steps li{font-size:11px;color:#8e7d70;display:flex;align-items:center;flex:1;gap:4px;white-space:nowrap}.demo-steps li:not(:last-child):after{content:'→';color:#b5a18f;margin-left:auto;margin-right:auto;font:12px Arial,sans-serif}.demo-steps li:last-child{flex:0 0 auto}.demo-steps li[aria-current="step"]{color:#8f4423;font-weight:750}.demo-steps li.is-complete{color:#5f6f50}
.demo-messages{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#c0a890 transparent;padding:18px 14px 24px;scroll-padding:16px;overflow-anchor:none}.demo-messages:focus-visible{outline:2px solid #b67754;outline-offset:-3px}
.demo-message{max-width:94%;margin-bottom:24px;animation:demo-message-enter .4s var(--ease)}.demo-message:last-child{margin-bottom:0}.demo-message>span{font-size:11px;display:block;margin-bottom:5px;color:#7b6452}.demo-message>p{font-size:14px;line-height:1.85;border:1px solid #e3d4c4;padding:11px 13px;background:#fffdf8;border-radius:3px 15px 15px 15px;overflow-wrap:anywhere}.demo-message>p strong{font-weight:650;color:#8c482a}.human-message{margin-left:auto}.human-message>span{text-align:right}.human-message>p{background:#e7d6c5;border-color:#dcc5b0;border-radius:15px 3px 15px 15px}
.demo-attachment{margin-top:8px;border:1px solid #dac8b7;border-radius:12px;padding:13px;background:#fcf9f3;background-image:radial-gradient(#c8b9a638 .7px,transparent .7px);background-size:15px 15px;overflow:hidden}
.demo-sub-label{font-size:11px;color:#8a6b53;display:block;letter-spacing:.025em}
.demo-purpose-note{padding:2px 4px}.demo-purpose-note>span{font-size:11px;color:#8c6c54}.demo-purpose-note h3{font-size:18px;line-height:1.6;font-weight:600;margin:3px 0 9px}.demo-note-rule{height:1px;background:#dac7b3;margin-bottom:8px}.demo-purpose-note p{font-size:20px;line-height:1.5;margin-top:3px}.demo-purpose-note p strong{color:#99512f;font-weight:600}.demo-purpose-note .demo-note-owner{display:block;margin-top:10px;color:#776555}
.demo-method ol{padding:0;margin:12px 0;list-style:none;display:flex;flex-direction:column;gap:7px}.demo-method li{padding:9px 10px;display:flex;gap:10px;align-items:center;border:1px solid #d6c2af;background:#fffcf7}.demo-method li>span{font:11px Arial,sans-serif;color:#a06b48}.demo-method li>strong{font-size:13px;font-weight:550}.demo-method>p{font-size:11px;color:#7a6b5d;line-height:1.8}
.demo-outline-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.demo-outline-heading>span:last-child{font-size:11px;background:#2c241f;color:#ffeddf;padding:1px 8px}.demo-outline ol{padding:0;margin:0;list-style:none}.demo-outline li{font-size:13px;padding:7px 0;border-top:1px solid #e5d8cb;display:flex;align-items:center;gap:14px}.demo-outline li>span{font:11px Arial,sans-serif;color:#9d7a5d}.demo-approved{font-size:12px;color:#516642;margin-top:9px}
.demo-role-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin-bottom:12px;font-size:10px;color:#785e48}.demo-role-flow>span{padding:4px;background:#e8dacb}.demo-role-flow>b{font:12px Arial,sans-serif;font-weight:400}.demo-rough-slide{position:relative;background:#2c241f;color:#fcf2e7;min-height:180px;padding:16px 17px;box-shadow:3px 3px 0 #c09c7d;overflow:hidden}.demo-slide-kicker{font-size:11px;letter-spacing:.06em;color:#d9b190}.demo-rough-slide h3{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:24px;line-height:1.45;font-weight:500;margin:8px 0 12px}.demo-rough-slide p{font-size:11px;color:#e9ceba;line-height:1.6}.demo-rough-rule{height:2px;background:#e8b58b;width:55%;margin-bottom:10px;transform-origin:left;animation:demo-line-build 1.2s var(--ease)}.demo-slide-num{display:block;text-align:right;margin-top:6px;font:11px Arial,sans-serif;color:#d3ac8c}.demo-making-note{font-size:11px;line-height:1.8;color:#7f674f;margin-top:12px}
.demo-slide-grid{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.demo-slide-grid li{min-height:104px;position:relative;background:#2c241f;color:#faeee2;box-shadow:2px 2px 0 #c8aa9033;padding:10px 9px;animation:demo-slide-built .5s var(--ease) both}.demo-slide-grid li:nth-child(2){animation-delay:.12s;background:#d9b99d;color:#3b2a1c}.demo-slide-grid li:nth-child(3){animation-delay:.24s;background:#ede0d3;color:#4c3525}.demo-slide-grid li:nth-child(4){animation-delay:.36s;background:#80634c;color:#fff4e6}.demo-slide-grid li:nth-child(5){animation-delay:.48s;background:#354a36;color:#f4f3d7}.demo-slide-grid li>span{font:11px Arial,sans-serif;display:block;opacity:.75;margin-bottom:6px}.demo-slide-grid li>strong{font-size:12px;font-weight:550;line-height:1.65;display:block;letter-spacing:-.04em}.demo-slide-grid li>i{display:block;width:30%;height:1px;background:currentColor;opacity:.55;margin-top:9px}.demo-result-caption{display:flex;align-items:center;gap:7px;font-size:11px;color:#655d4e;line-height:1.7}.demo-result-caption>span{color:#436647;font-size:18px}
.demo-controls{flex-shrink:0;border-top:1px solid #dac8b7;padding:8px 15px;display:flex;flex-direction:column;gap:2px;background:#faf6ef}.demo-controls>p{font-size:11px;font-weight:550;color:#805037}.demo-controls>div{display:flex;justify-content:space-between;gap:16px}.demo-controls>div:has(button:not([hidden])){min-height:36px}.demo-controls button{padding:7px 0;background:transparent;color:#785d49;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:36px}.demo-controls button:hover{color:#2c241f}
.demo-end-actions{margin-top:16px;padding:22px 20px;border-radius:16px;background:#2c241f;color:#f9f2e9;animation:demo-open .5s var(--ease)}.demo-end-actions>p{font-size:14px;line-height:1.9;color:#e0c9b6}.demo-end-actions strong{color:#fff1df;font-weight:550}.demo-end-actions>div{display:flex;flex-direction:column;gap:10px;margin-top:17px}.demo-end-actions button{background:transparent;border:1px solid #ac8e75;color:#e8cbb3;font-size:13px;padding:12px;min-height:46px}.demo-end-actions a{display:flex;align-items:center;justify-content:center;gap:8px;background:#f0ddc9;color:#382619;font-size:13px;padding:13px 10px;min-height:46px}.demo-end-actions button:hover{background:#4d3829}.demo-end-actions a:hover{background:#fff0dd}
@keyframes demo-open{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes demo-message-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes demo-line-build{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes demo-slide-built{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:760px){.demo-invitation{margin-top:30px}.demo-cta-wrap{display:block;padding:0 24px 55px 0}.demo-cta{width:100%;padding:20px 18px;gap:12px;min-height:90px}.demo-cta strong{font-size:17px;letter-spacing:-.03em}.demo-play-icon{font-size:16px}.demo-pointing-hand{width:122px;height:122px;right:-7px;bottom:2px}.creation-demo{margin-top:32px}.demo-phone{border-radius:20px}.demo-header{padding:13px}.demo-header h2{font-size:13px}.demo-messages{padding:16px 11px 22px}}
@media(max-width:375px){.demo-cta strong{font-size:16px}.demo-header{gap:4px;padding:12px 10px}.demo-header h2{font-size:12px}.demo-header>span{font-size:10px}.demo-steps{padding:10px;gap:4px}.demo-steps li{font-size:10px}.demo-goal{padding:10px 13px}.demo-message{max-width:97%}.demo-attachment{padding:10px}.demo-slide-grid li{padding:9px 7px}.demo-slide-grid li>strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){.demo-pointing-hand{animation:none}.creation-demo,.demo-message,.demo-slide-grid li,.demo-end-actions,.demo-rough-rule{animation:none!important}.demo-cta{transition:none}}
@media print{.demo-invitation,.creation-demo{display:none}}
.creation-demo[data-paused="true"] *{animation-play-state:paused!important}