#john-demo{--jd-blue:#3478f6;--jd-muted:#999;display:grid;grid-template-columns:1fr 440px;align-items:center;gap:80px;padding-top:90px;padding-bottom:90px;border-top:1px solid #222}
#john-demo *{box-sizing:border-box}#john-demo [hidden]{display:none!important}#john-demo .jd-copy h2{font-size:clamp(36px,4vw,58px);line-height:1.08;letter-spacing:-2px;max-width:520px}#john-demo .jd-copy>p:not(.eyebrow){max-width:410px;margin-top:25px;font-size:16px;line-height:1.7}#john-demo .jd-services{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0}#john-demo .jd-services span{border:1px solid #333;border-radius:30px;padding:6px 12px;font-size:12px;color:#ccc}#john-demo .jd-note{font-size:12px!important;color:#888;max-width:370px}
#john-demo .jd-phone{border:1px solid #595959;border-radius:52px;background:#111;padding:10px;box-shadow:0 0 0 3px #222,0 30px 90px #0008;width:100%;max-width:440px;justify-self:center}#john-demo .jd-screen{background:#18181a;border-radius:42px;overflow:hidden;position:relative;display:flex;flex-direction:column;height:690px;color:#f5f5f7;font-family:-apple-system,BlinkMacSystemFont,'Geist',sans-serif}#john-demo .jd-status{height:42px;display:flex;align-items:center;justify-content:space-between;padding:10px 27px 0;font-size:12px;flex:none}#john-demo .jd-island{height:23px;width:99px;border-radius:20px;background:#050505}#john-demo .jd-topbar{display:flex;align-items:center;gap:11px;padding:17px 22px;border-bottom:1px solid #303034;flex:none}#john-demo .jd-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#3b3b40;color:#fff;font-size:17px;font-weight:600}#john-demo .jd-identity{flex:1;line-height:1.4}#john-demo .jd-identity strong{display:block;font-size:16px}#john-demo .jd-identity small{font-size:11px;color:#aaa}#john-demo .jd-end{border:0;background:none;color:#86b3ff;font-size:12px;padding:10px;cursor:pointer}#john-demo .jd-gate{padding:25px 24px;overflow:auto;flex:1;min-height:0}#john-demo .jd-gate h3{font-family:inherit;font-size:23px;letter-spacing:-.6px;margin:0 0 9px}#john-demo .jd-gate p{font-size:13px;line-height:1.6;color:#aaa;margin:0 0 20px}#john-demo label{font-size:12px;color:#ddd;margin:0 0 14px}#john-demo input{font-size:16px;color:white;border:1px solid #414147;border-radius:12px;background:#242427;margin-top:6px;padding:12px 14px;min-height:46px}#john-demo input:focus{outline:2px solid #609aff;outline-offset:2px}#john-demo .jd-consent{display:flex;gap:9px;align-items:flex-start;font-size:11px;line-height:1.55;color:#aaa;margin:17px 0}#john-demo .jd-consent input{width:16px;height:16px;min-height:16px;flex:none;margin:2px 0;accent-color:var(--jd-blue)}#john-demo .jd-primary{width:100%;min-height:48px;border:0;border-radius:13px;background:var(--jd-blue);color:white;font-size:15px;font-weight:600;cursor:pointer}#john-demo button:disabled{opacity:.55;cursor:wait}#john-demo .jd-error{color:#ffb6b6;font-size:12px;line-height:1.5;margin-top:10px}#john-demo .jd-log{overflow-y:auto;overscroll-behavior:contain;padding:20px 16px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;scroll-behavior:smooth}#john-demo .jd-bubble{max-width:86%;padding:11px 15px;border-radius:20px;background:#303034;font-size:15px;line-height:1.45;align-self:flex-start;white-space:pre-wrap;overflow-wrap:anywhere}#john-demo .jd-bubble.user{background:var(--jd-blue);align-self:flex-end;border-bottom-right-radius:6px}#john-demo .jd-bubble.assistant{border-bottom-left-radius:6px}#john-demo .jd-info{text-align:center;font-size:11px;color:#9a9aa0;line-height:1.5;margin:0 7px 8px}#john-demo .jd-compose{padding:10px 14px 13px;border-top:1px solid #303034;display:flex;gap:9px;align-items:flex-end;flex:none}#john-demo .jd-compose textarea{resize:none;min-height:44px;max-height:100px;flex:1;border:1px solid #4b4b50;border-radius:23px;background:transparent;color:white;font-size:16px;padding:11px 15px;line-height:1.3;margin:0}#john-demo .jd-send{border:none;border-radius:50%;width:40px;height:40px;margin-bottom:2px;flex:none;background:var(--jd-blue);color:white;font-size:25px;cursor:pointer}#john-demo .jd-home{height:5px;width:120px;background:#eee;border-radius:4px;margin:5px auto 10px;flex:none}#john-demo .jd-dots{color:#bbb;letter-spacing:3px;animation:jd-pulse 1.2s infinite}#john-demo .jd-finish{padding:30px 24px;flex:1;overflow:auto}#john-demo .jd-finish h3{font-family:inherit;font-size:25px}#john-demo .jd-finish p{font-size:14px;line-height:1.65}#john-demo .jd-finish a{display:block;text-align:center;padding:13px;margin:20px 0 12px}#john-demo .jd-secondary{width:100%;background:transparent;border:1px solid #555;border-radius:12px;color:#ddd;padding:12px;cursor:pointer}#john-demo .jd-honey{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}#john-demo .jd-live-dot{display:inline-block;height:6px;width:6px;border-radius:50%;background:#6cce94;margin-right:5px}
@keyframes jd-pulse{50%{opacity:.35}}@media(prefers-reduced-motion:reduce){#john-demo .jd-dots{animation:none}#john-demo .jd-log{scroll-behavior:auto}}
@media(max-width:900px){#john-demo{grid-template-columns:1fr;gap:38px;padding-top:65px;padding-bottom:65px}#john-demo .jd-copy{text-align:center}#john-demo .jd-copy h2,#john-demo .jd-copy>p{margin-left:auto;margin-right:auto}#john-demo .jd-services{justify-content:center}}
@media(max-width:480px){#john-demo{padding-left:16px;padding-right:16px;gap:28px}#john-demo .jd-copy h2{font-size:38px}#john-demo .jd-copy>p:not(.eyebrow){font-size:14px}#john-demo .jd-phone{border-radius:32px;padding:5px;box-shadow:0 0 0 2px #222}#john-demo .jd-screen{border-radius:27px;height:min(700px,86svh);min-height:570px}#john-demo .jd-status{height:31px;padding-top:7px}#john-demo .jd-island{height:19px;width:80px}#john-demo .jd-topbar{padding:13px 17px}#john-demo .jd-gate{padding:20px}#john-demo .jd-bubble{font-size:15px}}

#john-demo .jd-reference{display:block;color:#9bc0ff;font-size:13px;margin-top:10px;text-decoration:underline}#john-demo .jd-copy h2 em{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic}