.topbar .tutorial-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;margin-left:auto;min-height:42px;padding:8px 12px;border:1px solid #f6f2fc;border-radius:10px;background:#fcfaff;color:#81738e;font-size:13px;font-weight:600;cursor:pointer}.tutorial-trigger svg{flex:none}.topbar .account-nav{margin-left:0}
#studio-tutorial{width:min(1000px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #e0d5ef;border-radius:24px;background:#fff;color:#292137;box-shadow:0 24px 100px #26114340;overflow:hidden}
#studio-tutorial::backdrop{background:#21132a99;backdrop-filter:blur(5px)}
.tutorial-shell{display:flex;flex-direction:column;height:min(650px,calc(100dvh - 32px));min-height:0}
.tutorial-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px 12px;flex:none}.tutorial-header>div{display:flex;align-items:center;gap:10px}.tutorial-header .brand-mark{width:28px;height:28px;font-size:20px;border-radius:9px}.tutorial-header strong{font-size:15px}.tutorial-header>button{display:grid;place-items:center;width:44px;height:44px;border:0;background:#f5f0fb;border-radius:12px;color:#6c5089;font-size:27px;cursor:pointer}
.tutorial-progress{display:flex;gap:5px;padding:0 24px;flex:none}.tutorial-progress span{height:3px;flex:1;background:#eee8f6;border-radius:3px}.tutorial-progress .is-complete{background:#7540eb}
.tutorial-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);align-items:center;gap:30px;padding:26px 30px;min-height:0;flex:1;overflow:auto;overscroll-behavior:contain}.tutorial-copy{min-width:0}.tutorial-count{display:block;font-size:13px;letter-spacing:2px;font-variant-numeric:tabular-nums;font-weight:800;color:#8554ca;margin-bottom:15px}.tutorial-copy h2{font-size:32px;letter-spacing:-1.1px;line-height:1.12;margin:0 0 18px}.tutorial-copy>p{font-size:16px;line-height:1.7;color:#71627f}.tutorial-copy .tutorial-tip{margin-top:24px;padding-top:18px;border-top:1px solid #e9e0f4;color:#806c95;font-size:14px;line-height:1.6}
.tutorial-visual{min-width:0}.tutorial-demo{position:relative;height:368px;border:1px solid #ded4ec;border-radius:18px;background:#faf8fd;box-shadow:0 10px 30px #59327d0d;overflow:hidden;pointer-events:none;user-select:none}.tutorial-demo-bar{display:flex;align-items:center;gap:7px;height:42px;padding:0 14px;border-bottom:1px solid #e8e1f0;background:#fff;font-size:12px;font-weight:800;color:#392c48}.tutorial-demo-bar>span:first-child{display:grid;place-items:center;width:21px;height:21px;background:#7440e9;color:#fff;border-radius:6px;font-size:15px}.tutorial-demo-bar>small{margin-left:auto;color:#8c7d99;font-size:10px;font-weight:500}
.tutorial-scene{height:calc(100% - 42px);padding:20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}.tutorial-scene h3{font-size:17px;letter-spacing:-.4px;line-height:1.3;margin:0}.tutorial-scene h4{font-size:23px;line-height:1.3;letter-spacing:-.5px;margin:9px 0}.tutorial-scene p{font-size:13px;line-height:1.6;color:#83708f;margin:0}.tutorial-scene strong{font-size:14px;line-height:1.4}.td-kicker{display:block;font-size:10px;letter-spacing:.65px;color:#87749c;font-weight:800}.td-button{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:37px;max-width:100%;padding:9px 14px;border:1px solid #7540eb;border-radius:9px;background:#7540eb;color:white;font-size:12px;font-weight:800;line-height:1.25;text-align:center}.td-quiet{color:#6838b4;background:#f4eefd;border-color:#e1d2f3}.td-card{background:linear-gradient(115deg,#ede2ff,#fff);border:1px solid #ded0f5;border-radius:15px;padding:22px}.td-card .td-button{margin-top:18px}.td-mark{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 12px;border-radius:15px;background:#eee5ff;color:#703be5;font-weight:800;font-size:30px}.td-welcome{text-align:center;margin:auto;max-width:100%;width:100%}.td-welcome p{margin:10px 0 16px}.td-welcome .td-choice{margin-top:8px}.td-choice{padding:11px 12px;border:1px solid #ded1ed;border-radius:10px;background:#fff;color:#665173;font-size:13px;line-height:1.35}.td-stack{display:grid;gap:10px}.td-agent-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.td-agent-title>.td-button{max-width:150px;font-size:11px}.td-fields{display:grid;gap:10px}.td-fields label{display:grid;gap:4px;font-size:11px;color:#877493}.td-fields label>span{padding:9px 10px;border:1px solid #e0d5eb;border-radius:8px;background:white;color:#574167;font-size:12px;line-height:1.3}.td-success{padding:10px 12px;border:1px solid #cce9de;background:#f1faf6;border-radius:10px;color:#418169;font-size:13px;font-weight:750}.td-bubble{border:1px solid #dce6f0;border-radius:14px 14px 14px 4px;background:#f0f5fa;padding:17px;font-size:14px;line-height:1.6;color:#43596e}.td-bubble p{color:#5d7184;margin-top:8px}.td-upload{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;border:1px dashed #cbb7e7;border-radius:14px;background:white}.td-upload>span{font-size:30px;color:#916dbb}.td-upload .td-button{align-self:center}
.td-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}.td-comparison>div>span{display:block;font-size:11px;color:#7e6990;margin-bottom:7px}.td-photo-original,.td-photo-cutout{display:flex;justify-content:center;align-items:center;height:160px;border-radius:9px;overflow:hidden}.td-photo-original{background:#d7d4d0}.td-photo-cutout{background:repeating-conic-gradient(#e7e4eb 0% 25%,#fff 0% 50%) 0/14px 14px}.td-product{display:block;object-fit:contain;width:82px;height:130px}.td-selected-photo{display:flex;gap:12px;align-items:center;padding:9px 12px;border:1px solid #dae1ec;border-radius:10px;background:white}.td-selected-photo .td-product{width:55px;height:82px}.td-selected-photo>div{display:grid;gap:6px}.td-selected-photo span{font-size:11px;color:#7b7184;line-height:1.4}.td-bubble .td-selected-photo{margin-top:12px}.td-photo-choice{display:flex;flex-direction:column;align-items:center;gap:10px;background:white;padding:14px;border:1px solid #e0d3ee;border-radius:12px;font-size:12px;color:#6a4f7e}.td-photo-choice .td-product{height:166px;width:110px}.td-compose{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:12px;border:1px solid #ddcfea;border-radius:12px;background:white}.td-compose>span:first-child{font-size:12px;line-height:1.5;color:#826992;min-width:0}.td-compose [data-demo-type]{min-height:36px}.td-compose .td-button{flex:none;align-self:center}.td-processing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;flex:1;text-align:center}.td-spinner{width:30px;height:30px;border:3px solid #e4d6f8;border-top-color:#7540eb;border-radius:50%;animation:tutorial-spin 1.1s linear infinite}.td-processing p{max-width:260px}.td-result{display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:16px;align-items:center;min-height:0;flex:1}.td-art{display:block;width:100%;height:100%;max-height:265px;object-fit:contain;object-position:center;border-radius:9px}.td-result>div{min-width:0}.td-result p{margin:10px 0 16px;font-size:13px;color:#536679}.td-link{font-size:11px;color:#6852a5;text-decoration:underline}.td-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex:none}.td-share{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:270px;margin:auto}.td-share .td-product{height:90px;width:60px}.td-share .td-choice{width:100%;text-align:center}.td-save{display:flex;flex-direction:column;gap:18px;padding:20px;border:1px solid #dfd6e9;border-radius:12px;background:white;margin:auto;width:100%}.td-save .td-button{align-self:flex-end}.td-history{display:grid;gap:12px;padding:12px;border:1px solid #e6dcef;border-radius:12px;background:#f5f0fb}.td-history .td-kicker{margin:8px 0 0}.td-menu{display:grid;place-items:center;width:38px;height:38px;font-size:23px;color:#78589a;border:1px solid #decfed;border-radius:8px}.td-mini-balance{font-size:10px;color:#96839f;text-align:center}.tutorial-demo .is-targeted{outline:3px solid #ad88f0;outline-offset:4px}
.tutorial-pointer{position:absolute;top:0;left:0;width:34px;height:40px;z-index:2;opacity:0;filter:drop-shadow(0 3px 3px #25123d44);pointer-events:none}.tutorial-pointer svg{width:30px;height:34px;display:block}.tutorial-pointer::after{content:'';position:absolute;left:-13px;top:-13px;width:30px;height:30px;border:2px solid #9a6bee;border-radius:50%;opacity:0}.tutorial-pointer.is-touch{width:26px;height:26px;margin-left:-13px;margin-top:-13px;border:3px solid white;border-radius:50%;background:#8244eae0;box-shadow:0 0 0 2px #6830c2;filter:none}.tutorial-pointer.is-touch svg{display:none}.tutorial-pointer.is-touch::after{left:-9px;top:-9px}.tutorial-pointer.is-clicking::after{animation:tutorial-tap .5s ease-out}.tutorial-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 2px 0;font-size:11px;color:#8f7b9f}.tutorial-demo-footer button{border:0;border-bottom:1px solid #bca4d8;padding:5px 0;background:none;color:#795199;font-size:12px;cursor:pointer;min-height:32px;white-space:nowrap}.tutorial-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 26px;border-top:1px solid #eee7f6;flex:none;background:#fff}.tutorial-footer button{min-width:112px;min-height:44px;font-size:14px}.tutorial-footer .quiet{background:white}.tutorial-footer button:disabled{cursor:default;opacity:.4}.tutorial-footer small{font-size:12px;color:#9b89a9;text-align:center}
@keyframes tutorial-tap{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(1.8)}}@keyframes tutorial-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.topbar{gap:6px;padding-inline:10px}.topbar .brand{gap:6px;font-size:19px}.topbar .brand small{font-size:9px}.topbar .brand-mark{width:28px;height:28px;font-size:22px}.topbar .tutorial-trigger{width:auto;height:40px;min-height:40px;padding:0 10px;border-radius:10px;border-color:#f3eeff;background:#faf7ff;font-size:13px;white-space:nowrap}.topbar .tutorial-trigger svg{display:none}.tutorial-label{display:inline}.topbar .account-nav button{padding-inline:6px}.topbar #logout{padding-inline:8px}.topbar #menu{padding-inline:3px}.topbar .account-nav{margin-left:0}#studio-tutorial{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:19px}.tutorial-shell{height:calc(100dvh - 16px)}.tutorial-header{padding:10px 15px 8px}.tutorial-header strong{font-size:14px}.tutorial-header>button{height:40px;width:40px}.tutorial-progress{padding-inline:16px}.tutorial-body{grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;padding:20px 18px 16px}.tutorial-count{font-size:12px;margin-bottom:8px}.tutorial-copy h2{font-size:26px;letter-spacing:-.75px;line-height:1.17;margin-bottom:10px}.tutorial-copy>p{font-size:15px;line-height:1.55}.tutorial-copy .tutorial-tip{font-size:13px;line-height:1.5;margin-top:12px;padding:10px 12px;border:0;border-radius:9px;background:#f8f4fe}.tutorial-demo{height:305px;border-radius:14px}.tutorial-scene{padding:14px;gap:10px}.tutorial-scene h3{font-size:16px}.td-card{padding:18px}.td-card h4{font-size:22px}.td-photo-original,.td-photo-cutout{height:118px}.td-comparison .td-product{height:103px;width:65px}.td-photo-choice .td-product{height:127px}.td-result{gap:12px}.td-art{max-height:215px}.td-bubble{padding:12px;font-size:13px}.td-bubble .td-selected-photo{margin-top:9px}.td-selected-photo .td-product{height:65px;width:43px}.td-fields{gap:7px}.td-fields label>span{padding:7px 9px}.tutorial-demo-footer{font-size:10px;gap:6px}.tutorial-demo-footer button{font-size:11px;min-height:36px}.tutorial-footer{padding:12px 16px max(12px,env(safe-area-inset-bottom));gap:10px}.tutorial-footer button{min-width:104px}.tutorial-footer small{display:none}}
@media(max-width:360px){.topbar{gap:4px;padding-inline:8px}.topbar .brand{font-size:18px;gap:5px}.topbar .brand small{display:none}.topbar .brand-mark{width:28px;height:28px;font-size:22px}.topbar .account-nav button{padding-inline:5px;font-size:10px}.topbar #logout{font-size:10px;padding-inline:6px}.topbar .tutorial-trigger{width:auto;padding-inline:8px}.topbar #menu{width:24px;min-width:24px;padding:0}.topbar .brand-mark{width:25px;height:25px;font-size:20px}.tutorial-body{padding:16px 14px;gap:14px}.tutorial-copy h2{font-size:24px}.tutorial-demo{height:300px}.tutorial-scene{padding:12px}.td-agent-title>.td-button{max-width:120px;padding:8px}.td-result p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.td-spinner{animation:none}.tutorial-pointer{display:none}}

@media(max-width:700px) and (max-height:760px){.tutorial-body{padding-block:16px;gap:14px}.tutorial-copy h2{font-size:24px}.tutorial-count{margin-bottom:6px}.tutorial-copy .tutorial-tip{margin-top:10px}.tutorial-header{padding-block:6px}.tutorial-footer{padding-top:10px}}

.td-result>*{min-height:0}.td-success,.td-actions,.td-mini-balance{flex-shrink:0}

@media(max-width:700px){.td-fields{gap:6px}.td-fields label{line-height:1.25;gap:3px}.td-fields label>span{padding-block:5px}}
/* Agent selection and the Outbound variant share the same tutorial behavior. */
#studio-tutorial{font-family:Manrope,'Segoe UI',sans-serif;line-height:1.5}#studio-tutorial *,#studio-tutorial *:before,#studio-tutorial *:after{box-sizing:border-box}#studio-tutorial [hidden]{display:none!important}#studio-tutorial button{font-family:inherit;cursor:pointer}#studio-tutorial .tutorial-header .brand-mark{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1;padding:0;letter-spacing:0;font-family:Arial,sans-serif;flex:none;background:#6938ef;color:white;font-weight:800}#studio-tutorial .tutorial-header>div{margin-right:auto}#studio-tutorial #tutorial-change-agent{width:auto;font-size:13px;padding:0 12px;white-space:nowrap}#studio-tutorial .tutorial-footer button{padding:10px 18px;border-radius:10px;border:1px solid #e0d5ef}#studio-tutorial .tutorial-footer .primary{color:white;background:linear-gradient(110deg,#7540eb,#5932b6);border:0}#studio-tutorial .tutorial-footer .quiet{color:#6838b4}#studio-tutorial #tutorial-title:focus{outline:0}
.tutorial-chooser{padding:32px;overflow:auto;overscroll-behavior:contain;flex:1}.tutorial-chooser h2{font-size:30px;line-height:1.2;margin:12px 0}.tutorial-chooser>p{font-size:16px;line-height:1.6;color:var(--studio-muted,#716780);margin:0 0 26px}.tutorial-agent-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.tutorial-agent-option{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;padding:26px;border-radius:18px;border:1px solid #ceb8ef;background:#f1eafd;color:#5932a4;min-width:0;transition:transform .15s,border-color .15s}.tutorial-agent-option:hover{transform:translateY(-2px)}.tutorial-agent-option strong{font-size:22px;line-height:1.2}.tutorial-agent-option>span:not(.tutorial-agent-symbol){font-size:16px;line-height:1.5}.tutorial-agent-option small{font-size:14px;font-weight:800;margin-top:auto;padding-top:8px}.tutorial-agent-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:#6938ef;color:white;font-size:32px;font-weight:800}.tutorial-agent-option:focus-visible{outline:3px solid #a880ee;outline-offset:3px}.tutorial-outbound{background:#e9f4ff;border-color:#a9ceed;color:#1d5488}.tutorial-outbound .tutorial-agent-symbol{background:linear-gradient(110deg,#326aa3,#3ba8ce)}.tutorial-outbound:focus-visible{outline-color:#448dde}.td-tabs{display:flex;gap:20px;font-size:13px}.td-tabs strong{color:var(--studio-accent,#448dde)}
#studio-tutorial[data-agent=outbound]{--studio-accent:#3177b7;--studio-action:#326aa3;--studio-action-hover:#3ba8ce;--studio-soft:#e9f4ff}#studio-tutorial[data-agent=outbound] :is(.tutorial-count,.tutorial-tip,.td-kicker,.td-link,.tutorial-demo-footer button){color:#3177b7}#studio-tutorial[data-agent=outbound] :is(.td-button,.tutorial-demo-bar>span:first-child,.tutorial-progress .is-complete){background:#3177b7;border-color:#3177b7;color:white}#studio-tutorial[data-agent=outbound] .td-card{background:linear-gradient(115deg,#e3f0ff,#f8fcff);border-color:#b6d4f0}#studio-tutorial[data-agent=outbound] :is(.td-mark,.td-quiet){background:var(--studio-soft);color:var(--studio-accent);border-color:#b6d4f0}#studio-tutorial[data-agent=outbound] .td-spinner{border-top-color:var(--studio-accent)}#studio-tutorial[data-agent=outbound] .tutorial-demo .is-targeted{outline-color:#73b4ef}#studio-tutorial[data-agent=outbound] .tutorial-footer .primary{background:linear-gradient(110deg,#326aa3,#3ba8ce);color:white}#studio-tutorial[data-agent=outbound] .tutorial-footer .quiet{color:var(--studio-accent)}#studio-tutorial[data-agent=outbound] .tutorial-pointer svg{fill:#246499}#studio-tutorial[data-agent=outbound] .tutorial-pointer.is-touch{background:#3177b7;box-shadow:0 0 0 2px #246499}#studio-tutorial[data-agent=outbound] .tutorial-pointer:after{border-color:#448dde}
html[data-studio-theme=dark] .tutorial-social{background:#261739;border-color:#604781;color:#c3a5fc}html[data-studio-theme=dark] .tutorial-outbound{background:#102338;border-color:#365d82;color:#80bafa}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound]{--studio-accent:#80bafa;--studio-soft:#102338}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound] .td-card{background:#102338;border-color:#365d82}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound] :is(.tutorial-count,.tutorial-tip,.td-kicker,.td-link,.tutorial-demo-footer button){color:#80bafa}html[data-studio-theme=dark] #studio-tutorial .tutorial-footer .quiet{background:var(--studio-raised);color:var(--studio-text);border-color:var(--studio-line)}html[data-studio-theme=dark] #studio-tutorial .tutorial-header>button{background:var(--studio-raised);color:var(--studio-text)}
@media(max-width:700px){.tutorial-chooser{padding:20px 18px}.tutorial-chooser h2{font-size:26px}.tutorial-agent-options{grid-template-columns:minmax(0,1fr);gap:12px}.tutorial-agent-option{display:grid;grid-template-columns:44px minmax(0,1fr);gap:7px 14px;padding:18px}.tutorial-agent-symbol{grid-row:1/4;width:44px;height:44px;font-size:28px;border-radius:12px}.tutorial-agent-option strong{font-size:19px}.tutorial-agent-option>span:not(.tutorial-agent-symbol),.tutorial-agent-option small{grid-column:2;font-size:14px}.tutorial-agent-option small{padding-top:3px}.tutorial-header{gap:8px}#studio-tutorial #tutorial-change-agent{font-size:12px;padding-inline:8px}#studio-tutorial .tutorial-header strong{font-size:12px}.tutorial-chooser>p{margin-bottom:18px}.tutorial-chooser h2{margin-top:4px}}
@media(max-width:360px){#studio-tutorial .tutorial-header .brand-mark{display:none}.tutorial-chooser{padding:16px}.tutorial-chooser h2{font-size:23px}.tutorial-chooser>p{font-size:14px}.tutorial-agent-option{padding:14px;gap:6px 10px}.tutorial-agent-option strong{font-size:17px}.tutorial-agent-option>span:not(.tutorial-agent-symbol){font-size:13px}}
@media(prefers-reduced-motion:reduce){.tutorial-agent-option{transition:none}.tutorial-agent-option:hover{transform:none}}

/* Keep tutorials self-contained on public pages as well as inside the account. */

html[data-studio-theme=dark] #studio-tutorial{--studio-panel:#0c0e12;--studio-raised:#14161c;--studio-line:#2b2d36;--studio-text:#edeef3;--studio-muted:#a9abb9;--studio-accent:#b69aff;--studio-soft:#211b31;background:var(--studio-panel);color:var(--studio-text);border-color:var(--studio-line)}
html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound]{--studio-accent:#80bafa;--studio-soft:#102338}
html[data-studio-theme=dark] #studio-tutorial :is(.tutorial-demo,.tutorial-demo-bar,.tutorial-scene,.tutorial-footer,.td-card,.td-save,.td-history){background:var(--studio-panel);color:var(--studio-text);border-color:var(--studio-line)}
html[data-studio-theme=dark] #studio-tutorial :is(.tutorial-copy>p,.tutorial-scene p,.tutorial-demo-footer,.tutorial-footer small,.td-mini-balance,.td-fields label,.td-bubble p,.td-result p,.td-compose>span:first-child,.td-comparison>div>span,.tutorial-demo-bar>small){color:var(--studio-muted)}
html[data-studio-theme=dark] #studio-tutorial :is(.td-bubble,.td-upload,.td-photo-choice,.td-compose,.td-photo-original,.td-choice,.td-fields label>span,.td-selected-photo){background:var(--studio-raised);border-color:var(--studio-line);color:var(--studio-text)}
html[data-studio-theme=dark] #studio-tutorial :is(.td-mark,.td-quiet,.tutorial-copy .tutorial-tip){background:var(--studio-soft);border-color:var(--studio-line);color:var(--studio-accent)}
html[data-studio-theme=dark] #studio-tutorial :is(.tutorial-count,.td-link,.td-upload>span,.tutorial-demo-footer button,.td-kicker){color:var(--studio-accent)}
html[data-studio-theme=dark] #studio-tutorial .td-selected-photo span{color:var(--studio-muted)}
html[data-studio-theme=dark] #studio-tutorial .td-success{background:#11271f;border-color:#305443;color:#94d8b2}
html[data-studio-theme=dark] #studio-tutorial .td-photo-cutout{background:repeating-conic-gradient(#2b2933 0% 25%,#19171f 0% 50%) 0/14px 14px}
html[data-studio-theme=dark] #studio-tutorial :is(.tutorial-progress span,.td-spinner){border-color:var(--studio-line);background-color:var(--studio-line)}
html[data-studio-theme=dark] #studio-tutorial .tutorial-progress .is-complete{background:var(--studio-accent)}
html[data-studio-theme=dark] #studio-tutorial .td-spinner{background:transparent;border-top-color:var(--studio-accent)}
html[data-studio-theme=dark] #studio-tutorial .tutorial-demo-footer button{border-color:var(--studio-line)}
#studio-tutorial[data-agent=outbound] .tutorial-header .brand-mark{background:linear-gradient(110deg,#326aa3,#3ba8ce)}
#outbound-offer,#social-offer{scroll-margin-top:90px}
#studio-tutorial[data-agent=outbound]{border-color:#b6d4f0}#studio-tutorial[data-agent=outbound] :is(.tutorial-header>button,.tutorial-copy .tutorial-tip){background:var(--studio-soft);color:var(--studio-accent)}#studio-tutorial[data-agent=outbound] .tutorial-demo{background:#f4f9ff;border-color:#b6d4f0}#studio-tutorial[data-agent=outbound] .tutorial-demo-bar{border-color:#d7e8f6}#studio-tutorial[data-agent=outbound] .tutorial-demo-bar>small{color:#5480a3}#studio-tutorial[data-agent=outbound] .tutorial-footer{border-color:#d7e8f6}#studio-tutorial[data-agent=outbound] .tutorial-progress span:not(.is-complete){background:#e3eff9}
html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound]{border-color:#365d82}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound] :is(.tutorial-demo,.tutorial-footer,.tutorial-demo-bar){background:var(--studio-panel);border-color:#365d82}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound] .tutorial-progress span:not(.is-complete){background:#1e354b}html[data-studio-theme=dark] #studio-tutorial[data-agent=outbound] .tutorial-demo-bar>small{color:#80bafa}
@media(max-width:700px){#studio-tutorial[data-agent=outbound] .tutorial-demo{height:330px}}
#studio-tutorial:not([data-agent]) .tutorial-shell{height:auto;max-height:calc(100dvh - 32px)}.tutorial-chooser{min-height:0}
html[data-studio-theme] #studio-tutorial[data-agent=outbound] .tutorial-footer .primary{background:linear-gradient(110deg,#326aa3,#3ba8ce);color:white;box-shadow:0 4px 18px #367fc930,inset 0 1px 0 #ffffff26}
html[data-studio-theme] #studio-tutorial[data-agent=outbound] .td-button{background:#3177b7;box-shadow:none;color:#fff}
html[data-studio-theme] #studio-tutorial[data-agent=outbound] .td-quiet{background:var(--studio-soft);color:var(--studio-accent);border-color:var(--studio-line,#b6d4f0)}
html[data-studio-theme] #studio-tutorial[data-agent=outbound] .studio-click-sweep::after{background:linear-gradient(100deg,#326aa3,#367fc9 60%,#3fa9cc)}
@media(max-width:700px){#studio-tutorial:not([data-agent]) .tutorial-shell{max-height:calc(100dvh - 16px)}}
/* Social opens the same prepared simulation as Simular agora. */
#studio-tutorial .social-tutorial-mount{position:relative;overflow:hidden}
#tutorial-social-frame{display:block;width:100%;min-height:0;flex:1;border:0;opacity:0;background:var(--studio-bg,#f7f5fc)}
#tutorial-social-frame.is-ready{opacity:1}
.tutorial-simulation-loading{position:absolute;inset:24px 20px auto;margin:0;color:var(--studio-muted,#716780);font-size:14px}
#studio-tutorial .tutorial-header>div{min-width:0}
#studio-tutorial .tutorial-header strong{line-height:1.3}
#studio-tutorial .tutorial-header>button{flex-shrink:0}
@media(max-width:700px){#studio-tutorial .tutorial-header{gap:8px;padding:12px}#studio-tutorial .tutorial-header>div{gap:8px}#studio-tutorial #tutorial-change-agent{font-size:11px;padding:0 8px}#studio-tutorial .tutorial-header strong{font-size:12px}#studio-tutorial .tutorial-header .brand-mark{width:25px;height:25px;font-size:18px}}

.tutorial-agent-options{grid-template-columns:repeat(3,minmax(0,1fr))}.tutorial-insights{background:#e8f5ee;border-color:#a7d6be;color:#176f4a}.tutorial-insights .tutorial-agent-symbol,#studio-tutorial[data-agent=insights] .brand-mark{background:linear-gradient(110deg,#176f4a,#36ad78)}html[data-studio-theme=dark] .tutorial-insights{background:#112a20;border-color:#32664d;color:#7cdaad}

@media(max-width:760px){.tutorial-agent-options{grid-template-columns:1fr}}