:root{--ink: #16181c;--panel: #1b1d22;--panel-2: #23262c;--blue: #1f6fb2;--blue-bright: #1f93da;--blue-accent: #29a3e0;--navy-bubble: #0e4d77;--rep-bubble: #eef2f6;--text: #14181d;--muted: #5d6670;--line: rgba(0, 0, 0, .12);--radius: 10px;--maxw: 980px;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:#0e0f11;color:var(--text)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}.stage{width:100%;max-width:var(--maxw);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 12px 40px #00000073;display:flex;flex-direction:column;min-height:560px}.btn{font-size:16px;font-weight:600;border:none;border-radius:8px;padding:12px 22px;cursor:pointer;transition:filter .15s,transform .05s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn:focus-visible,.field input:focus-visible,.sample-row select:focus-visible,.textsubmit__input:focus-visible{outline:3px solid #8ecbff;outline-offset:2px}.btn--primary{background:var(--blue);color:#fff}.btn--accent{background:var(--blue-accent);color:#fff}.btn--ghost{background:transparent;color:var(--blue);border:2px solid var(--blue)}.btn--block{width:100%}.field{display:block;margin-bottom:18px}.field__label{display:block;color:var(--blue-bright);font-weight:600;margin-bottom:8px;font-size:15px}.field input,.sample-row select{width:100%;padding:12px 14px;font-size:16px;border:none;border-radius:6px;background:#f3efe6;color:#14181d}.screen{flex:1;display:flex}.screen--split{min-height:560px;background-image:url(/customize-bg.png);background-size:cover;background-position:center}.screen__art{flex:0 0 46%;display:flex;align-items:flex-end;justify-content:center}.presenter{max-height:540px;max-width:100%;object-fit:contain}.screen__panel{flex:1;color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:center}.panel__content{display:flex;flex-direction:column;width:100%;animation:panelIn .28s ease-out}.panel__content--leaving{animation:panelOut .2s ease-in forwards}@keyframes panelIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes panelOut{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.panel__content,.panel__content--leaving{animation:none}}.screen__title{font-size:30px;font-weight:800;margin:0 0 24px;line-height:1.1}.screen__title--hero{font-size:34px;margin-bottom:18px}.welcome__lead{margin:0 0 14px;font-size:18px;line-height:1.55;color:#fff}.welcome__sub{margin:0 0 30px;font-size:16px;line-height:1.55;color:#d5dde6}.divider{display:flex;align-items:center;gap:12px;color:#8b929b;margin:18px 0;font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#3a3e45}.sample-row{display:flex;gap:10px}.sample-row select{flex:1}.screen--center{flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--blue-bright);color:#fff}.spinner{width:44px;height:44px;border:5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .9s linear infinite}.loading__label{font-size:18px;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}.screen--conversation{position:relative;flex-direction:column}.conversation__header{background:#fff;padding:18px 28px;border-bottom:1px solid var(--line)}.conversation__header p{margin:0;font-size:17px;color:#1a1d22}.conversation__stage{position:relative;flex:1;background:var(--blue-bright);display:flex;align-items:stretch;gap:24px;padding:28px;min-height:380px}.conversation__input{position:relative;z-index:2;flex:0 0 40%;display:flex;flex-direction:column;justify-content:center;gap:12px}.conversation__customer{position:relative;z-index:2;flex:1;display:flex;align-items:stretch;justify-content:flex-start;gap:8px;min-width:0}.end-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background:#05101ed1}.end-character{position:absolute;right:14%;top:25%;height:165%}.end-character .character{display:block;width:auto;height:100%;max-height:none;max-width:480px}.end-character .character--placeholder{width:260px;height:82%}.end-bubble{position:absolute;left:13%;top:16%;width:50%;max-width:560px;background:#1a6cb0;color:#fff;font-size:22px;line-height:1.45;padding:22px 28px;border-radius:16px;box-shadow:0 14px 36px #00000073}.end-bubble--done:after{content:"";position:absolute;right:-15px;top:120px;border:12px solid transparent;border-left-color:#1a6cb0;border-right:0}.end-cta{position:absolute;left:17%;bottom:13%;font-size:23px;font-weight:700;padding:18px 60px;border-radius:8px;background:#1f9fe0;background-image:none;color:#fff;box-shadow:0 6px 18px #00000059}.end-ghost{position:absolute;top:24%;left:50%;transform:translate(-55%);max-width:440px;background:var(--navy-bubble);color:#fff;font-size:19px;line-height:1.4;padding:18px 24px;border-radius:16px}.end-typing{display:inline-flex;gap:6px;align-items:center}.end-typing .dot{width:9px;height:9px;background:#ffffffd9;border-radius:50%;animation:bounce 1.2s infinite}.end-typing .dot:nth-child(2){animation-delay:.15s}.end-typing .dot:nth-child(3){animation-delay:.3s}.speech-wrap{flex:1;display:flex;align-items:flex-start;justify-content:flex-start;min-width:0;padding-top:24px}.character{max-height:400px;max-width:220px;object-fit:contain;align-self:flex-end}.character--placeholder{width:180px;height:300px;background:#ffffff29;border:2px dashed rgba(255,255,255,.6);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;padding:10px}.character__emotion{font-size:20px;font-weight:700;text-transform:capitalize}.character__hint{font-size:11px;opacity:.8}.speech-bubble{position:relative;background:var(--navy-bubble);color:#fff;font-size:19px;line-height:1.5;padding:18px 22px;border-radius:16px;max-width:420px}.speech-bubble:after{content:"";position:absolute;left:-12px;top:18px;border:8px solid transparent;border-right-color:var(--navy-bubble);border-left:0}.speech-bubble__caret{display:inline-block;width:8px;height:18px;background:#fff;margin-left:2px;vertical-align:text-bottom;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.speech-bubble--typing{display:inline-flex;gap:6px;align-items:center}.speech-bubble--typing .dot{width:8px;height:8px;background:#ffffffd9;border-radius:50%;animation:bounce 1.2s infinite}.speech-bubble--typing .dot:nth-child(2){animation-delay:.15s}.speech-bubble--typing .dot:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}.textsubmit{display:flex;flex-direction:column;gap:12px;background:#fff;padding:16px;border-radius:var(--radius)}.textsubmit__input{width:100%;min-height:150px;resize:vertical;padding:12px 14px;font-size:16px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:#fff}.error-bar{background:#fdecea;color:#a3261f;padding:10px 16px;font-size:14px;border-radius:6px}.replay-banner{background:#0d3b5c;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 18px;font-size:14px;transition:opacity .3s}.replay-banner--dim{background:#0a1e30}.replay-banner--dim span,.replay-banner--dim .btn{opacity:.45}.replay-banner .btn{padding:6px 14px;font-size:14px;border-color:#fff;color:#fff}.screen--feedback{flex-direction:column}.feedback__top{display:flex}.feedback__performance{flex:1;background:var(--ink);color:#fff;padding:32px}.feedback__performance p{font-size:16px;line-height:1.5}.feedback__dial{flex:0 0 46%;background:#fff;padding:24px 32px;display:flex;flex-direction:column;gap:14px}.dial__labels{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:-8px}.dial__score{text-align:center;font-size:22px}.breakdown{display:flex;flex-direction:column;gap:8px}.breakdown__row{display:grid;grid-template-columns:150px 1fr 48px;align-items:center;gap:10px;font-size:13px}.breakdown__bar{background:#e9edf1;height:8px;border-radius:4px;overflow:hidden}.breakdown__fill{display:block;height:100%;background:var(--blue-accent)}.breakdown__num{text-align:right;color:var(--muted)}.feedback__panels{background:var(--blue-bright);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:28px 32px}.panel{display:flex;gap:16px;align-items:flex-start}.panel__icon{width:64px;height:64px;flex:none}.panel__text{flex:1;min-width:0}.panel__title{margin:0 0 8px;font-size:17px;font-weight:700}.panel__body{margin:0;font-size:15px;line-height:1.5}.feedback__actions{background:#fff;padding:18px 32px;text-align:right}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media (max-width: 720px){.screen--split,.feedback__top,.feedback__panels,.conversation__stage,.conversation__customer{flex-direction:column}.feedback__top,.feedback__panels{grid-template-columns:1fr}.conversation__input{flex-basis:auto}.conversation__customer{align-items:center}.character{max-width:160px;max-height:240px}.speech-bubble:after{display:none}.screen__art{display:none}.screen__panel{background:#0c1016d9;padding:28px 20px}.end-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;overflow-y:auto}.end-character,.end-bubble,.end-cta{position:static;transform:none;inset:auto;width:auto;max-width:100%}.end-ghost{display:none}.end-bubble{order:1;font-size:16px;line-height:1.4;padding:14px 16px;box-shadow:none}.end-bubble--done:after{display:none}.end-character{order:2;height:auto}.end-character .character{height:auto;max-height:200px;max-width:200px}.end-cta{order:3;width:100%;text-align:center;font-size:18px;padding:14px}}