:root{--guide-color:#8c73c9;--guide-pale:#e9e0f7;--bg:#f3f0f8;--ink:#292532;--line:#e1dae9}body{background:radial-gradient(ellipse at 4% 5%,#eae1f7 0,transparent 45%),radial-gradient(ellipse at 92% 93%,#e9e8f5 0,transparent 50%),var(--bg)}[hidden]{display:none!important}.app{max-width:1660px;padding:0 4.8vw}header{height:85px;gap:20px}.brand-star{color:var(--guide-color)}.header-center{margin-left:auto;margin-right:30px}.outline-btn{background:#ffffff60;border-color:#d9d1e5;padding:10px 16px}.switch-companion{background:#ffffff9c;display:flex;align-items:center;gap:8px;border:1px solid #ddd2eb;border-radius:40px;padding:4px 10px 4px 18px;font-size:12px;line-height:1.5;min-width:110px;text-align:right}.switch-companion:hover{background:var(--guide-pale)}.header-avatar{width:34px;height:38px;object-fit:contain;object-position:top}.switch-companion small{display:block;color:#9a8ba9;font-size:8px}.journey{display:flex;align-items:center;gap:15px;padding:16px 0 5px;flex-shrink:0}.journey button{background:none;display:flex;align-items:center;gap:7px;font-size:10px;color:#a299ac;padding:0}.journey button>span{display:grid;place-items:center;width:20px;height:20px;border:1px solid #dbd1e7;border-radius:50%;font-size:9px}.journey button.current{color:var(--guide-color);font-weight:700}.journey button.current>span{background:var(--guide-color);color:#fff;border:0}.journey button.passed>span{background:#e5dded;color:#8c779b}.journey i{color:#c3b6d1;letter-spacing:2px}.journey .journey-done{font-size:9px;margin-right:auto;color:#978a9f}.slide{padding:23px 0 28px}.title-row h1{font-size:clamp(27px,2.8vw,43px)}.eyebrow{margin-bottom:15px}.title-row{margin-bottom:22px}.panel{border-radius:18px;border-color:#e0d9e9;background:#ffffff85}.panel.lilac{background:linear-gradient(135deg,#eae2f4,#e1d8ef)}.panel.dark{background:linear-gradient(135deg,#302937,#201c29)}.panel.lime{background:#edf2db}.cta,.next{box-shadow:0 5px 0 #1f192b0c;transition:transform .2s,background .2s,box-shadow .2s}.cta:hover,.next:hover{transform:translateY(-2px);box-shadow:0 7px 18px #3724481a}.cta:active,.next:active{transform:translateY(0)}footer{height:76px;border-top:0}.segments button.active:after{background:var(--guide-color)}.next{min-width:160px;font-size:11px;white-space:nowrap}.hero{padding:10px 0}.hero h1{font-size:clamp(48px,4.7vw,76px);line-height:1.4}.hero h1 em{color:var(--guide-color)}.hero h1 em:after{border-color:var(--guide-color)}.hero .visual{height:370px;scale:.9}.hero .lead{font-size:14px;line-height:2}.hero-notes{font-size:9px}.hero .cta{padding:12px 20px}.guided-slide{animation:chapter-enter .45s cubic-bezier(.2,.75,.25,1) both}.companion-dock{position:relative;flex-shrink:0;display:grid;grid-template-columns:95px 1fr 210px;gap:16px;align-items:center;min-height:118px;background:#fff9;border:1px solid #ded6e8;border-radius:19px;margin:0 0 3px;padding:14px 20px 12px 24px;box-shadow:0 10px 30px #38244304}.companion-dock:after{content:'';position:absolute;top:12px;bottom:12px;right:0;width:3px;border-radius:3px;background:var(--guide-color)}.pet-button{position:relative;height:84px;width:95px;background:transparent;padding:0;align-self:end}.dock-pet{position:absolute;bottom:9px;right:0;width:91px;height:119px;object-fit:contain;transform-origin:bottom center;animation:pet-breathe 5s ease-in-out infinite;filter:drop-shadow(0 7px 5px #4c306a12)}.pet-button:hover .dock-pet{animation:pet-hop .65s ease-in-out}.pet-status{position:absolute;bottom:-2px;right:15px;font-size:8px;color:#8b7c9b;background:#f4eef9;border:1px solid #e4d9ed;border-radius:20px;padding:2px 8px;white-space:nowrap}.guide-speaker{display:flex;align-items:center;gap:9px;font-size:11px}.guide-speaker strong{color:var(--guide-color);font-size:12px}.guide-speaker span{color:#aa9db5;font-size:9px}.guide-speaker button{margin-right:auto;background:#f1edf5;width:21px;height:21px;border-radius:50%;font:16px Arial;color:#9888a5}.guide-speech p{font-size:12px;line-height:2;margin:5px 0 6px;color:#706477;animation:line-reveal .35s ease both}.guide-controls{display:flex;align-items:center;gap:20px}.guide-controls button{background:none;color:#8a6cb0;font-size:9px;padding:0}.guide-controls button:first-child{display:flex;gap:8px;align-items:center}.guide-controls .complete-step{color:#9d8ba9}.guide-controls .complete-step.is-done{color:#577a5c}.guide-small{font-size:9px;color:#a294ab}.next-peek{border-right:1px dashed #d9cfe3;padding-right:22px;position:relative;display:flex;flex-direction:column;gap:7px}.next-peek>span:first-child{font-size:9px;color:#a89ab5}.next-peek strong{font-size:12px;font-weight:600;color:#746280}.peek-arrow{position:absolute;left:0;top:4px;font:29px Georgia;color:#b6a4c7}.companion-dock.is-collapsed{min-height:0;height:35px;background:transparent;border-color:transparent;box-shadow:none;padding:0;margin:0}.is-collapsed:after,.is-collapsed .guide-speech,.is-collapsed .next-peek{display:none}.is-collapsed .pet-button{height:35px;width:100px}.is-collapsed .dock-pet{height:55px;width:45px;right:0;bottom:-1px}.is-collapsed .pet-status{right:41px;bottom:8px}.choosing-companion .header-center{margin:auto}.choosing-companion header{border-bottom:0}.companion-picker{max-width:1100px;margin:0 auto;padding:12px 0 24px;animation:chapter-enter .5s ease both}.picker-kicker{display:flex;justify-content:center;align-items:center;gap:12px;font-size:10px;color:#9b86b2}.picker-kicker span:first-child{background:#e9e0f4;border:1px solid #d8cae9;padding:5px 12px;border-radius:20px;color:#8c70ab}.tiny-line{height:1px;width:24px;background:#cdbede}.picker-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:20px 0 26px}.picker-heading h1{font-size:clamp(35px,3.4vw,53px);line-height:1.5;letter-spacing:-1.8px;font-weight:900;margin:0}.picker-heading h1 br{display:none}.picker-heading h1 em{font-style:normal;color:var(--guide-color);position:relative}.picker-heading h1 em:after{content:'';position:absolute;bottom:0;right:0;left:0;height:7px;border-bottom:2px solid currentColor;border-radius:50%;transform:rotate(-4deg)}.picker-heading p{font-size:11px;color:#92849c;line-height:2.2;margin:0 0 7px;min-width:260px}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;direction:rtl}.character-card{position:relative;border:1px solid #ded4e9;background:#fff7;border-radius:24px;overflow:hidden;padding:0 20px 23px;text-align:center;transition:transform .28s,border-color .28s,box-shadow .28s;isolation:isolate;animation:card-arrive .5s both;animation-delay:var(--delay)}.character-card:hover{transform:translateY(-6px);border-color:var(--card-accent);box-shadow:0 18px 40px #5b417715}.character-card.selected{border:2px solid var(--card-accent);background:linear-gradient(180deg,var(--card-pale),#ffffffbc 78%);box-shadow:0 12px 40px #6944970b;transform:translateY(-5px);padding:0 19px 22px}.card-index{position:absolute;top:19px;right:21px;font:11px monospace;color:#b6a8c2}.selection-tick{position:absolute;left:17px;top:17px;width:24px;height:24px;display:grid;place-items:center;border:1px solid #d6cbdf;border-radius:50%;color:transparent;font-size:12px;z-index:3}.selected .selection-tick{background:var(--card-accent);border-color:var(--card-accent);color:white}.character-scene{position:relative;height:218px;margin:6px 0 9px;display:flex;justify-content:center;align-items:flex-end}.character-halo{position:absolute;width:175px;height:175px;top:32px;left:50%;transform:translateX(-50%);border-radius:50%;background:var(--card-pale);opacity:.8}.character-halo:before{content:'';position:absolute;inset:-13px;border:1px dashed var(--card-accent);border-radius:50%;opacity:.18}.character-portrait{position:relative;z-index:2;width:180px;height:208px;object-fit:contain;object-position:bottom;transform-origin:center bottom;transition:transform .3s;filter:drop-shadow(0 11px 10px #49326418)}.selected .character-portrait{animation:pet-breathe 5s ease-in-out infinite}.character-card:hover .character-portrait{transform:rotate(-4deg) translateY(-4px)}.character-shadow{position:absolute;bottom:0;width:110px;height:12px;background:#57416912;border-radius:50%;filter:blur(5px)}.character-spark{position:absolute;z-index:3;color:var(--card-accent);opacity:.6;font:32px Georgia}.spark-a{top:55px;right:28px;transform:rotate(-12deg)}.spark-b{bottom:25px;left:21px;font-size:22px}.character-english{display:block;font:8px monospace;letter-spacing:2px;color:#b1a3bd;margin-bottom:5px}.character-info h2{margin:0;font-size:24px;letter-spacing:-.5px;font-weight:800}.character-info p{color:#9e8da9;font-size:11px;margin:4px 0 13px}.character-tags{display:flex;gap:6px;justify-content:center}.character-tags span{font-size:8px;padding:4px 9px;border:1px solid #dfd6e8;background:#ffffff75;border-radius:20px;color:#9b88aa}.selected .character-tags span{border-color:color-mix(in srgb,var(--card-accent) 25%,transparent);color:var(--card-accent)}.picker-bottom{display:flex;justify-content:space-between;gap:35px;align-items:center;margin-top:27px}.welcome-bubble{flex:1;display:flex;gap:15px;align-items:center;background:#ffffff9c;border:1px solid #ddd2e9;border-radius:15px;padding:16px 22px;position:relative;min-height:86px}.welcome-bubble:before{content:'';position:absolute;right:35px;top:-7px;width:13px;height:13px;background:#f7f3fb;border-top:1px solid #ddd2e9;border-left:1px solid #ddd2e9;transform:rotate(45deg)}.bubble-sign{font:25px Georgia;color:var(--guide-color)}#previewName{font-size:10px;color:var(--guide-color);font-weight:700}#previewSpeech{margin:5px 0 0;font-size:12px;line-height:2;color:#83718e;max-width:570px}.picker-action{display:flex;flex-direction:column;align-items:center;gap:12px;flex-shrink:0}.picker-action .cta{min-width:245px;justify-content:space-between;background:#33283f;font-size:12px;border-radius:11px;padding:17px 23px}.picker-action>span{color:#a396af;font-size:8px}.picker-footnote{margin-top:20px;display:flex;justify-content:space-between;gap:20px;color:#b1a6ba;font-size:8px}.guide-detail{width:min(560px,92vw);border-radius:25px;background:#f8f4fc;padding:30px}.guide-close{position:absolute;top:13px;left:16px;background:#ece4f4;border-radius:50%;width:29px;height:29px;font-size:23px;color:#9c87ad}.detail-top{display:flex;gap:22px;align-items:center}.detail-pet{height:140px;width:100px;object-fit:contain;animation:pet-breathe 5s ease-in-out infinite}.detail-top h2{font-size:24px;line-height:1.7;margin:5px 0}.detail-top .mini-label{font-family:Vazirmatn;font-size:10px;letter-spacing:0;margin:0}.detail-explanation{font-size:14px;line-height:2.4;color:#776782}.detail-mission{padding:14px 20px;background:var(--guide-pale);border-radius:13px;margin:20px 0}.detail-mission>span{font-size:10px;color:var(--guide-color);font-weight:700}.detail-mission p{font-size:12px;line-height:2;margin:6px 0;color:#776782}.detail-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.detail-bottom small{font-size:8px;color:#b1a1bc}.detail-bottom .cta{padding:12px 17px;font-size:10px;gap:15px}#celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}#celebration i{position:absolute;left:var(--x);bottom:140px;width:7px;height:12px;border-radius:2px;animation:celebrate 1.3s cubic-bezier(.15,.7,.4,1) var(--delay) both}#toast{bottom:205px}.codebox{box-shadow:0 7px 20px #24172d08}.codebox pre{font-size:11px}.footer-meta{min-width:150px}.panel p{color:#766c80}.panel.dark p{color:#c8bdd5}.note{border-right-color:var(--guide-color)}
@keyframes pet-breathe{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}@keyframes pet-hop{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-13px) rotate(-7deg)}70%{transform:translateY(-4px) rotate(5deg)}}@keyframes line-reveal{from{opacity:0;transform:translateX(7px)}to{opacity:1;transform:translateX(0)}}@keyframes chapter-enter{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes card-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes celebrate{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-240px) rotate(var(--turn))}}
@media(min-height:900px) and (min-width:1000px){.companion-picker{padding-top:25px}.picker-heading{margin:30px 0 35px}.character-scene{height:245px}.character-portrait{height:235px;width:210px}.character-halo{height:200px;width:200px}.picker-bottom{margin-top:32px}}
@media(max-width:1100px){.header-center{display:none}.switch-companion{margin-right:auto}.picker-heading{align-items:center}.picker-heading h1{font-size:37px}.picker-heading h1 br{display:block}.picker-heading p{min-width:0;font-size:11px}.character-grid{gap:15px}.character-card{padding-left:12px;padding-right:12px}.character-card.selected{padding-left:11px;padding-right:11px}.character-info h2{font-size:20px}.character-tags span{font-size:7px;padding:4px 7px}.companion-dock{grid-template-columns:80px 1fr;gap:12px}.next-peek{display:none}.dock-pet{width:78px;height:108px}.pet-button{width:80px}.guide-speech p{font-size:11px}.hero .visual{scale:.82}.hero h1{font-size:56px}.picker-action .cta{min-width:210px}.picker-bottom{gap:20px}}
@media(max-width:740px){.app{padding:0 5.5vw;min-height:0}header{height:71px;gap:10px}.brand{font-size:28px}.brand-star{font-size:33px}.switch-companion{font-size:10px;min-width:90px;padding:3px 6px 3px 10px;gap:4px}.header-avatar{height:30px;width:26px}.switch-companion small{font-size:7px}.outline-btn{font-size:0;gap:0;padding:8px 12px}.outline-btn span{font-size:14px}.journey{gap:6px;padding-top:11px;padding-bottom:5px;justify-content:space-between}.journey button{font-size:8px;gap:4px}.journey button>span{width:17px;height:17px;font-size:8px}.journey i{font-size:8px;letter-spacing:0}.journey .journey-done{display:none}.slide{padding:20px 0 28px}.title-row h1{font-size:27px}.title-row p{font-size:11px}.chapter-no{font-size:35px}.hero h1{font-size:51px}.hero{padding-top:14px}.hero .visual{height:320px;scale:.85}.hero .lead{font-size:12px}.hero-notes{font-size:8px}.hero .eyebrow{font-size:9px}.companion-dock{border-radius:14px;min-height:122px;padding:9px 12px 10px;grid-template-columns:55px 1fr;gap:8px;margin-top:8px}.pet-button{width:55px;height:80px;align-self:center}.dock-pet{width:62px;height:94px;bottom:7px;right:-5px}.pet-status{font-size:6px;right:0;bottom:0;padding:2px 5px}.guide-speaker{gap:7px}.guide-speaker strong{font-size:10px}.guide-speaker span{font-size:7px}.guide-speech p{font-size:10px;line-height:1.9;margin:4px 0 6px}.guide-controls{gap:12px;flex-wrap:wrap}.guide-controls button{font-size:8px}.guide-small{font-size:7px}.guide-speaker button{height:18px;width:18px;font-size:13px}.companion-dock.is-collapsed{margin-top:4px}.is-collapsed .pet-button{height:32px}.is-collapsed .pet-status{font-size:8px}.next{min-width:135px;font-size:9px;padding:12px;gap:10px}footer{height:68px;gap:5px}.footer-meta{min-width:0;font-size:8px;gap:6px}#pageCount{font-size:10px}.nav-buttons{gap:5px}.prev{font-size:16px;width:30px}.segments{top:-2px}.companion-picker{padding:8px 0 24px}.picker-kicker{font-size:8px;gap:8px}.picker-kicker span:first-child{padding:4px 8px}.tiny-line{width:15px}.picker-heading{display:block;text-align:center;margin:17px 0 24px}.picker-heading h1{font-size:36px;line-height:1.65;letter-spacing:-1.4px}.picker-heading h1 br{display:block}.picker-heading p{font-size:10px;line-height:2.1;margin:10px 0 0}.character-grid{grid-template-columns:1fr;gap:13px}.character-card,.character-card.selected{display:grid;grid-template-columns:105px 1fr;align-items:center;text-align:right;border-radius:19px;padding:8px 12px;min-height:155px;transform:none}.character-card.selected{padding:7px 11px}.character-card:hover{transform:none}.character-scene{height:135px;margin:0}.character-portrait{width:98px;height:132px}.character-halo{width:100px;height:100px;top:20px}.character-halo:before{inset:-6px}.character-shadow{width:65px;bottom:0}.character-info{padding:9px 15px}.character-english{font-size:7px;letter-spacing:1.3px}.character-info h2{font-size:20px}.character-info p{font-size:9px;margin:4px 0 10px}.character-tags{justify-content:flex-start;gap:5px;flex-wrap:wrap}.character-tags span{font-size:6.5px;padding:3px 6px}.card-index{font-size:9px;right:auto;left:12px;top:auto;bottom:12px}.selection-tick{width:20px;height:20px;left:12px;top:12px;font-size:10px}.spark-a{font-size:22px;top:25px;right:0}.spark-b{font-size:16px;bottom:9px;left:0}.picker-bottom{flex-direction:column;gap:19px;margin-top:20px}.welcome-bubble{padding:13px 16px;min-height:95px;gap:12px;width:100%}#previewName{font-size:9px}#previewSpeech{font-size:10px}.picker-action{width:100%;gap:9px}.picker-action .cta{width:100%;font-size:12px;padding:15px 20px}.picker-action>span{font-size:8px}.picker-footnote{font-size:7px;line-height:1.9;margin-top:18px;display:block;text-align:center}.picker-footnote>span{display:block;margin-bottom:7px}.guide-detail{padding:25px 20px}.detail-top{gap:15px}.detail-pet{height:110px;width:80px}.detail-top h2{font-size:21px}.detail-explanation{font-size:12px;line-height:2.3}.detail-top .mini-label{font-size:8px}.detail-mission{padding:12px 15px}.detail-mission p{font-size:10px}.detail-bottom .cta{font-size:9px}.detail-bottom small{font-size:7px}#toast{bottom:210px;font-size:10px;width:max-content;max-width:85vw;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.character-card:hover,.cta:hover,.next:hover{transform:none!important}#celebration{display:none}}
.real-example{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center;background:linear-gradient(125deg,#e9e0f3,#ffffff85);border:1px solid #ded2eb;border-radius:24px;padding:30px 38px;min-height:380px}.example-badge{font-size:10px;color:#8b739f;display:flex;align-items:center;gap:8px}.example-badge>span{height:6px;width:6px;border-radius:50%;background:#8da173}.example-story blockquote{font-size:30px;font-weight:800;letter-spacing:-.7px;line-height:1.8;margin:16px 0}.example-story>p{font-size:12px;line-height:2.2;color:#897690;max-width:430px}.example-open{text-decoration:none;gap:50px;font-size:12px;padding:13px 23px;margin-top:13px}.example-address{display:block;text-align:right;font:10px monospace;letter-spacing:.3px;color:#a18daf;margin-top:12px}.example-divider{width:50px;height:1px;background:#ccbada;margin:20px 0}.example-celebration{position:relative;height:330px;display:flex;align-items:center;justify-content:center}.example-orbit{position:absolute;inset:15px 35px;border:1px dashed #c9b9db;border-radius:50%;background:#dccceb44}.example-celebration>img{height:280px;width:220px;object-fit:contain;position:relative;z-index:1;animation:pet-breathe 5s infinite;filter:drop-shadow(0 15px 18px #674c8220)}.example-star{position:absolute;color:#aa90c4;font:40px Georgia}.star-one{right:30px;top:60px}.star-two{left:15px;bottom:65px;font-size:47px}.live-ticket{position:absolute;top:7px;left:15px;font:8px monospace;letter-spacing:1px;background:#ffffffe6;display:flex;align-items:center;gap:9px;padding:12px 17px;transform:rotate(-5deg);border:1px solid #e1d5ec;border-radius:9px;z-index:2;color:#8b799b}.success-ticket{position:absolute;bottom:25px;right:10px;z-index:2;display:flex;gap:12px;align-items:center;background:#fffffff0;border:1px solid #e2d5eb;border-radius:12px;padding:12px 20px;transform:rotate(4deg);box-shadow:0 12px 20px #7652920b}.success-ticket>span{border-radius:50%;background:#dfedbd;color:#7b9553;padding:4px 8px;font-size:13px}.success-ticket strong{font-size:10px;color:#907b9e}.success-ticket p{font-size:13px;margin:4px 0 0;color:#5a456c;font-weight:700}.example-caption{position:absolute;bottom:-13px;font-size:9px;color:#a189b4}.example-story .text-btn{font-size:10px}@media(max-width:740px){.real-example{grid-template-columns:1fr;gap:25px;padding:22px;min-height:0}.example-story blockquote{font-size:26px}.example-story>p{font-size:11px}.example-celebration{height:280px}.example-celebration>img{height:240px;width:190px}.example-orbit{inset:10px}.star-one{right:4px}.star-two{left:0;font-size:30px}.success-ticket{right:-4px;padding:9px 13px;bottom:15px}.live-ticket{left:0;top:0}.example-open{font-size:11px;gap:30px}}