/* ---------- chatbot samples (.cd-*) ---------- */
.cd-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cd-demos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.cd{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(16,37,66,.14);min-height:470px;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#1c2433}
.cd-head{display:flex;align-items:center;gap:12px;padding:14px 16px;color:#fff}
.cd-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 18px Georgia,serif;background:rgba(255,255,255,.2)}
.cd-who b{display:block;font-size:16px}.cd-who small{opacity:.85;font-size:12.5px}
.cd-log{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:340px;min-height:230px;background:#f6f4ef}
.cd-m{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;animation:cdin .25s ease}
@keyframes cdin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cd-bot{background:#fff;border:1px solid #e6e0d4;align-self:flex-start;border-bottom-left-radius:4px}
.cd-me{align-self:flex-end;color:#fff;border-bottom-right-radius:4px}
.cd-typing{letter-spacing:.2em;color:#8a8478}
.cd-opts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid #eee7da;min-height:58px}
.cd-opt{font:600 14px Arial;background:#fff;border:2px solid;border-radius:999px;padding:9px 14px;min-height:42px;cursor:pointer;touch-action:manipulation}
.cd-form{display:flex;gap:8px;padding:0 14px 14px;background:#fff}
.cd-form input{flex:1;min-width:0;padding:11px 12px;font:16px system-ui;border:2px solid #d9d2c3;border-radius:10px}
.cd-form button{border:0;color:#fff;border-radius:10px;padding:0 16px;font:700 14px Arial;cursor:pointer;min-height:44px}
.cd-cap{margin:0;padding:8px 14px 12px;background:#fff;font:12px Arial;color:#6d675c;text-align:center}
/* three looks */
.cd-teal .cd-head,.cd-teal .cd-me,.cd-teal .cd-form button{background:#1f7a8c}.cd-teal .cd-me{background:#d94a14}.cd-teal .cd-form button{background:#d94a14}
.cd-teal .cd-opt{border-color:#1f7a8c;color:#10303a}.cd-teal .cd-opt:hover{background:#1f7a8c;color:#fff}
.cd-warm .cd-head{background:#3b2417}.cd-warm .cd-me,.cd-warm .cd-form button{background:#c8553d}.cd-warm .cd-log{background:#fbf4e8}
.cd-warm .cd-opt{border-color:#3b2417;color:#3b2417}.cd-warm .cd-opt:hover{background:#3b2417;color:#fff}
.cd-rose .cd-head{background:#2b2230}.cd-rose .cd-me,.cd-rose .cd-form button{background:#b8416b}.cd-rose .cd-log{background:#f8f1f3}
.cd-rose .cd-opt{border-color:#b8416b;color:#2b2230}.cd-rose .cd-opt:hover{background:#b8416b;color:#fff}.cd-rose .cd-m{border-radius:20px}.cd-rose .cd-opt{border-radius:12px}
.cd-label{font:600 12px Arial;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-d);margin:0 0 10px}

/* ---------- mascot ideas gallery (.mx-*) ---------- */
.mx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mx-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:14px;transition:transform .28s,box-shadow .28s}
.mx-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,37,66,.15)}
.mx-logo{display:flex;align-items:center;justify-content:center;height:74px;padding:4px 8px;border-radius:6px;font-size:22px}
.mx-arrow{text-align:center;color:var(--brass-d);font:600 13px Arial;letter-spacing:.12em;text-transform:uppercase}
.mx-stage{position:relative;background:linear-gradient(180deg,#fbf5ea,#f1e6d0);border-radius:8px;min-height:250px;display:grid;place-items:end center;padding:20px 10px 10px}
.mx-char{border:0;background:none;padding:0;width:170px;cursor:pointer;touch-action:manipulation}
.mx-char svg{display:block;width:100%;height:auto;overflow:visible}
.mx-pop{animation:mxpop .4s}
@keyframes mxpop{0%{transform:scale(1)}35%{transform:scale(1.1,.88)}70%{transform:scale(.96,1.06)}100%{transform:scale(1)}}
.mx-say{position:absolute;left:10px;right:10px;top:10px;background:#fff;border:1px solid var(--brass);border-radius:12px;padding:9px 12px;font:14px/1.4 system-ui;margin:0;box-shadow:0 6px 16px rgba(16,37,66,.12)}
.mx-say[hidden]{display:none}
.mx-card h3{margin:0;font-size:22px;color:var(--navy)}
.mx-card p{margin:0;color:var(--mute);font-size:15px}
.mx-hint{font:12px Arial;color:var(--mute);text-align:center;margin:0}
@media(max-width:900px){.cd-demos,.mx-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mx-card,.mx-pop,.cd-m{animation:none;transition:none}.mx-card:hover{transform:none}}
.cd-form[hidden]{display:none}
.cd-opts:empty{display:none}
.mx-img{position:relative;display:block;width:100%}
.mx-img img{display:block;width:100%;height:auto}
.mx-img .mx-talk,.mx-img .mx-pupils{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.mx-img .mx-talk{opacity:0}.mx-img.t .mx-talk{opacity:1}
.mx-char:has(.mx-img){width:210px}
.mx-ai{align-self:flex-start;font:600 10px Arial;letter-spacing:.14em;text-transform:uppercase;background:#fbf5ea;color:var(--brass-d);padding:4px 8px;border-radius:2px}
.mx-char:has(.mx-img){width:270px}
.mx-stage{min-height:300px}