.persona-app{display:grid;grid-template-columns:280px 1fr;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--paper);box-shadow:var(--shadow)}
.persona-tabs{padding:14px;background:#f2e7d8;display:flex;flex-direction:column;gap:8px}
.persona-tab{width:100%;padding:16px;border:0;border-radius:18px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.persona-tab b{display:block;font-family:Chewy,sans-serif;font-size:1.55rem;line-height:1}
.persona-tab span{font-size:.78rem;color:#62776d}
.persona-tab.active{background:var(--green);color:#fff;box-shadow:0 10px 18px rgba(21,91,70,.18)}
.persona-tab.active span{color:#d8e9dc}
.persona-panel{display:none;padding:38px}
.persona-panel.active{display:block}
.persona-top{display:grid;grid-template-columns:145px 1fr;gap:28px;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line)}
.avatar{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;font-family:Chewy,sans-serif;font-size:3.4rem;color:#fff;background:linear-gradient(135deg,#155b46,#7daa88);box-shadow:inset 0 0 0 11px rgba(255,255,255,.22)}
.avatar.terracotta{background:linear-gradient(135deg,#df5738,#f09c78)}
.avatar.gold{background:linear-gradient(135deg,#d48d1e,#f4c765)}
.persona-top h3{font-family:Chewy,sans-serif;font-size:2.4rem;line-height:1;margin:0 0 9px}
.persona-top p{color:#526d63;margin:0}
.role{display:inline-block;margin:10px 0 0;padding:5px 9px;border-radius:999px;background:var(--mint);color:var(--green);font-size:.75rem;font-weight:800}
.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.insight{padding:16px;border:1px solid var(--line);border-radius:17px;background:#fffdf9}
.insight b{display:block;font-size:.74rem;color:var(--orange);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.insight p{font-size:.9rem;color:#526d63;margin:0}
.quote-box{margin-top:14px;padding:14px 17px;border-radius:15px;background:#e4f0e7;color:var(--green);font-weight:700;font-size:.93rem}
.story-app{overflow:hidden;border:1px solid var(--line);border-radius:30px;background:var(--paper);box-shadow:var(--shadow)}
.story-tabs{display:grid;grid-template-columns:repeat(6,1fr);background:#f2e7d8}
.story-tab{border:0;border-right:1px solid #e7d8c6;padding:14px 9px;background:transparent;font:inherit;text-align:left;cursor:pointer}
.story-tab b{display:block;font-family:Chewy,sans-serif;color:var(--orange);font-size:1.4rem;line-height:1}
.story-tab span{display:block;font-size:.72rem;font-weight:800;color:#526d63;margin-top:4px}
.story-tab.active{background:var(--green)}
.story-tab.active b,.story-tab.active span{color:#fff}
.story-panel{display:none;grid-template-columns:minmax(220px,300px) 1fr;gap:34px;align-items:center;padding:35px}
.story-panel.active{display:grid}
.story-scene{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fffdf9;box-shadow:0 10px 20px rgba(39,53,43,.08)}
.story-scene img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.story-scene figcaption{padding:7px 10px;color:var(--green);font-size:.78rem;font-weight:800;text-align:center}
.story-copy h3{font-family:Chewy,sans-serif;font-size:2.3rem;line-height:1;margin:0 0 11px}
.story-copy p{max-width:640px;color:#526d63;margin:0}
.story-copy .result{margin-top:14px;font-weight:700;color:var(--green)}
.persona-top{grid-template-columns:180px 1fr}
.avatar{width:180px;height:180px;overflow:hidden;background:#e4f0e7}
.avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 18%}
@media(max-width:760px){.persona-app{grid-template-columns:1fr}
.persona-tabs{flex-direction:row;overflow:auto}
.persona-tab{min-width:145px}
.persona-panel{padding:25px}
.persona-top{grid-template-columns:1fr}
.avatar{width:132px;height:132px;font-size:2.6rem}
.insight-grid{grid-template-columns:1fr}
.story-tabs{display:flex;overflow:auto}
.story-tab{min-width:110px}
.story-panel.active{grid-template-columns:1fr;padding:25px;gap:18px}
}
@media(max-width:420px){.persona-panel{padding:18px}.persona-tabs{padding:9px}.persona-tab{min-width:124px;padding:13px}.persona-top h3{font-size:1.85rem}.story-panel.active{padding:18px}.story-tab{min-width:96px}.story-copy h3{font-size:1.9rem}}