/* The guide is an independent layer: closing it restores the page as it was. */
.header-actions .guide-launch{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 14px;border:1px solid #d8c4ff;border-radius:11px;background:#f0e8ff;color:#733de2;font:700 14px/1.4 var(--font);white-space:nowrap}
.guide-launch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.guide-launch:hover{background:#e7d8ff;box-shadow:0 3px 12px #7440d81a}
body.guide-active{overflow:hidden!important}
.rg-guide{position:fixed;inset:0;z-index:2146000000;isolation:isolate;overflow:hidden;color:#fff;font-family:var(--font);font-size:16px;line-height:1.6;pointer-events:auto;--rg-accent:#b291ff;--rg-bottom:max(32px,env(safe-area-inset-bottom));}
.rg-guide[hidden]{display:none!important}
.rg-dim{position:absolute;inset:0;background:rgba(22,15,43,.73);transition:background .25s;z-index:-1}
.rg-guide.has-target .rg-dim{background:transparent}
.rg-spotlight{position:fixed;border:2px solid #e4d4ff;border-radius:18px;box-shadow:0 0 0 9999px rgba(22,15,43,.73),0 0 0 5px #b48afa29,0 0 36px #b893f766;pointer-events:none;z-index:0;transition:top .25s,left .25s,width .25s,height .25s}
.rg-spotlight::after{content:"";position:absolute;inset:-6px;border:1px solid #dfc7ff;border-radius:23px;animation:rg-halo 2.8s ease-in-out infinite}
.rg-right-light{position:absolute;inset:0 0 0 46%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 53% 53%,#dcb1ef4d 0%,#a9a5ed24 38%,transparent 70%)}
.rg-right-light::after{content:"";position:absolute;width:64%;height:12%;left:17%;bottom:1%;border-radius:50%;background:radial-gradient(ellipse,#c8bdff5c,transparent 68%)}
.rg-sparkles{position:absolute;inset:0 0 0 48%;z-index:2;pointer-events:none}
.rg-sparkles i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:linear-gradient(130deg,#fff5db,#e2bffd);clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);opacity:.7;animation:rg-twinkle 4.5s ease-in-out infinite;animation-delay:var(--delay)}
.rg-sparkles i:nth-child(1){--x:13%;--y:25%;--size:24px;--delay:-.8s}
.rg-sparkles i:nth-child(2){--x:78%;--y:17%;--size:16px;--delay:-2.8s}
.rg-sparkles i:nth-child(3){--x:87%;--y:47%;--size:31px;--delay:-1.4s}
.rg-sparkles i:nth-child(4){--x:17%;--y:66%;--size:18px;--delay:-3.2s}
.rg-sparkles i:nth-child(5){--x:83%;--y:77%;--size:13px;--delay:-.2s}
.rg-sparkles i:nth-child(6){--x:38%;--y:12%;--size:11px;--delay:-2s}
.rg-top{position:absolute;top:max(22px,env(safe-area-inset-top));left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:16px;z-index:5;pointer-events:none}
.rg-top-label{display:flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid #dac8ff45;border-radius:30px;background:linear-gradient(120deg,#483062ed,#281d3def);font-size:13px;font-weight:700;letter-spacing:.05em;box-shadow:0 4px 18px #0d051d26,inset 0 1px #ffffff12;white-space:nowrap}
.rg-top-label>span:first-child{color:#eed4ff;font-size:17px}
.rg-top-actions{display:flex;gap:8px;pointer-events:auto}
.rg-top button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;min-width:40px;border:1px solid #e0cbff45;border-radius:12px;padding:7px 12px;background:linear-gradient(125deg,#3e2c54f5,#291d3af5);color:#fff;font:600 13px/1.4 var(--font);white-space:nowrap;box-shadow:inset 0 1px #ffffff0d;transition:background .2s,box-shadow .2s,transform .2s}
.rg-top button:hover{background:#513969;box-shadow:0 4px 18px #09031233}.rg-top button:active{transform:translateY(1px)}
.rg-top .rg-sound[aria-pressed="true"]{border-color:#d8b8ff8f;background:linear-gradient(120deg,#644987,#412e5c)}
.rg-sound svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.rg-sound-slash,.rg-sound[aria-pressed="false"] .rg-sound-waves{display:none}.rg-sound[aria-pressed="false"] .rg-sound-slash{display:block}
.rg-top button:disabled{opacity:.5;cursor:default}
@media(min-width:701px){.rg-guide[data-step="signup"] .rg-top-actions{transform:translateY(68px)}}
.rg-character{position:absolute;right:0;bottom:-2%;width:51%;height:94%;z-index:2;pointer-events:none;transform-origin:50% 85%;animation:rg-enter .65s cubic-bezier(.2,.8,.2,1) both}
.rg-character-poses{position:relative;width:100%;height:100%;transform-origin:50% 90%;animation:rg-breathe 5.2s ease-in-out infinite}
.rg-character img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 18px 28px #11072066);opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .35s ease}
.rg-character img.is-current{opacity:1;transform:none}
.rg-character.rg-react .rg-character-poses{animation:rg-nod .55s ease-in-out,rg-breathe 5.2s .55s ease-in-out infinite}
.rg-dialogue{position:absolute;left:5%;bottom:var(--rg-bottom);width:46%;max-width:700px;max-height:calc(100% - 155px);display:flex;flex-direction:column;overflow:hidden;isolation:isolate;z-index:4;padding:25px 28px 23px;border:1px solid #f8f1ff;border-top:4px solid #c5a1fb;border-radius:24px;background:radial-gradient(ellipse at 100% 0,#ebd9fcbb,transparent 55%),linear-gradient(130deg,#fffdfc 3%,#f6edff 65%,#eeefff);color:#272035;box-shadow:0 26px 70px #14092f59,0 0 0 5px #d0acff1a,inset 0 0 0 1px #ffffffb3}
.rg-dialogue::after{content:"✦";position:absolute;right:17px;top:39px;z-index:-1;color:#bd99e42b;font-size:135px;line-height:1;transform:rotate(12deg);pointer-events:none}
.rg-dialogue>*{flex-shrink:0}.rg-dialogue::before{flex-shrink:0}
.rg-story{min-height:0;flex:0 1 auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cdb7e8 transparent;padding:0 3px 0 0}
.rg-story:focus-visible{outline:2px solid #ac86df;outline-offset:-2px;border-radius:5px}
.rg-dialogue::before{content:"";display:block;width:42px;height:4px;background:linear-gradient(90deg,#b38bdc,#ebd4ec);border-radius:4px;margin-bottom:16px}
.rg-byline{display:flex;align-items:center;gap:9px;margin-bottom:15px;color:#7652ac;font-size:14px;font-weight:750}
.rg-byline span:first-child{padding:4px 13px;border:1px solid #ab79df;border-radius:9px;background:linear-gradient(120deg,#aa7ae1,#7846b7);color:white;text-shadow:0 2px 3px #41256966;box-shadow:0 4px 10px #7b43bb2b,inset 0 1px #ffffff40;letter-spacing:.08em}
.rg-byline span:first-child::before{content:"✦";margin-right:6px;font-size:11px;color:#f7e7ff}
.rg-byline .rg-episode{margin-left:auto;font-variant-numeric:tabular-nums;color:#8a7f9b;font-size:13px}
.rg-dialogue h2{margin:0 0 13px;font-size:clamp(22px,2.1vw,33px);font-weight:800;letter-spacing:-.04em;line-height:1.35;color:#292035;word-break:keep-all;text-shadow:0 2px 3px #74519429,0 5px 13px #b78bd51a}
.rg-message{position:relative;margin:0;min-height:92px;font-size:17px;line-height:1.9;letter-spacing:-.025em;white-space:pre-line;word-break:keep-all;color:#51425e;cursor:pointer;text-shadow:0 1px 2px #5c387521}
.rg-message-reserve{visibility:hidden;display:block}
.rg-message-typed{position:absolute;inset:0}
.rg-guide[data-step="home"] .rg-message{min-height:74px}
.rg-message.typing .rg-message-typed::after{content:"▌";display:inline-block;color:#9460e3;animation:rg-caret .7s steps(1) infinite;margin-left:3px}
.rg-hint{min-height:23px;display:flex;align-items:center;gap:7px;margin:15px 0 17px;color:#8553c5;font-size:13px;font-weight:650}
.rg-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.rg-actions{display:flex;align-items:center;gap:10px;padding-top:18px;border-top:1px solid #e9e2f1}
.rg-actions button{min-height:46px;border-radius:12px;padding:10px 16px;border:1px solid #dacee9;background:#ffffffb3;color:#705985;font:700 15px/1.4 var(--font);transition:transform .2s,box-shadow .2s,background .2s}
.rg-actions button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 14px #8b5ec321}.rg-actions button:not(:disabled):active{transform:translateY(1px)}
.rg-actions button:disabled{opacity:.35;cursor:default}
.rg-actions .rg-next{margin-left:auto;min-width:145px;color:#fff;background:linear-gradient(115deg,#aa75e8,#8150cf 65%,#7148bb);border:1px solid #9b6ed4;box-shadow:0 7px 18px #8544d435,inset 0 1px #ffffff45;text-shadow:0 1px 2px #57308244}
.rg-actions .rg-next:hover{background:linear-gradient(115deg,#af7aee,#7844c4);box-shadow:0 9px 22px #8544d449}
.rg-progress{display:flex;gap:5px;margin-top:17px}
.rg-progress span{height:4px;background:#ded2ec;border-radius:4px;flex:1;transition:background .25s}
.rg-progress span.done{background:linear-gradient(90deg,#b894e3,#c7a6e7)}.rg-progress span.current{background:linear-gradient(90deg,#9464d5,#bb91ec);box-shadow:0 0 8px #a16cd975}
.rg-guide[data-step="finish"] .rg-episode{color:#77539e}.rg-guide[data-step="finish"] .rg-dialogue{border-top-color:#bcafea;background:radial-gradient(ellipse at 100% 0,#e0dbff,transparent 58%),linear-gradient(125deg,#fffefa,#f2edff 65%,#eaf8f4)}
.rg-guide[data-step="finish"] .rg-sparkles i{animation-duration:2.8s;background:linear-gradient(130deg,#fff0c5,#c9f5e5)}
.rg-step-enter h2,.rg-step-enter .rg-story{animation:rg-copy-enter .28s ease-out both}
.rg-lesson{margin:5px 0 0;padding:14px 16px;border:1px solid #e0d3ed;border-radius:12px;background:linear-gradient(120deg,#f3edf9,#fff);box-shadow:inset 0 1px 0 #fff;color:#564466;font-size:14px;line-height:1.6}
.rg-lesson[hidden]{display:none}
.rg-signup-path{display:flex;align-items:center;gap:9px;margin-bottom:12px;font-size:12px;color:#7d6b8c}.rg-signup-path strong{padding:3px 10px;border-radius:6px;background:#8651cc;color:#fff}
.rg-field-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}.rg-field-list dt{font-weight:750;color:#4c365f}.rg-field-list dt span{margin-right:5px;font-size:11px;color:#9a72c3}.rg-field-list dd{margin:3px 0 0;font-size:12px;color:#7e6d8b}
.rg-photo-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:14px;margin:0}.rg-photo-example img{display:block;width:100%;height:auto;border-radius:7px;border:1px solid #cdbcda}.rg-photo-example figcaption{display:grid;gap:6px;font-size:12px;color:#796786}.rg-photo-example strong{color:#573a72;font-size:13px}.rg-lesson-note{margin:9px 0 0;font-size:11px;color:#897592}
.rg-signup-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;margin:0;list-style:none}.rg-signup-status li{display:flex;gap:7px;align-items:flex-start}.rg-signup-status li>span{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#e8dcf6;color:#8052b3;font-size:11px;font-weight:800}.rg-signup-status strong{display:block;font-size:12px;white-space:nowrap}.rg-signup-status small{display:block;font-size:11px;color:#82718f;word-break:keep-all}
.rg-guide[data-pose="explain"] .rg-character{height:92.5%}
.rg-target-action{position:fixed;z-index:6;margin:0;border:2px solid #fff;border-radius:10px;padding:7px 10px;color:#54208e;background:#f4eaff;font:800 15px/1.35 var(--font);display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 0 0 4px #b48aea5c,0 6px 22px #1d0a3540;animation:rg-invite 1.7s ease-in-out infinite;word-break:keep-all}
.rg-target-action::after{content:"↗";font-size:18px;color:#8e4be0}
.rg-guide button:focus-visible{outline:3px solid #e4cbff;outline-offset:5px}
.rg-guide .rg-actions button:focus-visible{outline-color:#793dc8}
.rg-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rg-guide.reduced-motion *{animation:none!important;transition:none!important}
@keyframes rg-enter{from{opacity:0;transform:translate(60px,24px)}to{opacity:1;transform:none}}
@keyframes rg-breathe{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-8px) rotate(.4deg)}}
@keyframes rg-nod{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(8px) rotate(-1.2deg)}}
@keyframes rg-invite{0%,100%{box-shadow:0 0 0 4px #b48aea5c,0 6px 22px #1d0a3540}50%{box-shadow:0 0 0 8px #b48aea20,0 6px 30px #a470df66}}
@keyframes rg-caret{50%{opacity:0}}
@keyframes rg-halo{0%,100%{opacity:.25}50%{opacity:.75}}
@keyframes rg-twinkle{0%,100%{opacity:.3;transform:translateY(3px) scale(.8)}50%{opacity:.9;transform:translateY(-6px) scale(1)}}
@keyframes rg-copy-enter{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes rg-field-glow{0%,100%{box-shadow:0 0 0 4px #c9a6f216}50%{box-shadow:0 0 0 4px #c9a6f24f}}
@media(max-width:1250px){body.guide-active .main-nav.grouped-nav.open{width:44%;min-width:180px;max-width:310px;max-height:40dvh;left:14px;overscroll-behavior:contain}.rg-dialogue{left:4%;width:48%;padding:20px}.rg-character{right:-3%;width:54%}.rg-top{left:3%;right:3%}.rg-top-label{font-size:12px}}
@media(max-width:700px){
 .header-actions .guide-launch{padding:8px 11px;gap:6px;font-size:13px}
 .rg-top{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;gap:8px}.rg-top-label{font-size:11px;padding:7px 9px;gap:4px}.rg-top-tagline{display:none}.rg-top button{font-size:11px;min-height:35px;padding:6px 8px;gap:4px}.rg-top-actions{gap:5px}.rg-sound svg{width:14px;height:14px}
 .rg-guide{--rg-bottom:max(12px,env(safe-area-inset-bottom))}
 .rg-character{height:55%;width:68%;right:-12%;bottom:37%;}
 .rg-character img{object-position:50% 100%}
 .rg-right-light{inset:0 0 30% 20%}
 .rg-sparkles{inset:9% 0 38% 30%}.rg-sparkles i:nth-child(n+5){display:none}
 .rg-dialogue{left:12px;right:12px;bottom:var(--rg-bottom);width:auto;max-width:none;max-height:48%;padding:16px 18px;border-radius:17px;border-top-width:3px}
 .rg-guide.has-lesson .rg-dialogue{max-height:58%}
 .rg-guide.has-lesson .rg-character{bottom:47%}
 .rg-guide[data-pose="explain"] .rg-character{height:54%}
 .rg-dialogue::before{display:none}.rg-byline{font-size:12px;margin-bottom:10px}.rg-byline .rg-episode{font-size:12px}
 .rg-dialogue h2{font-size:23px;margin-bottom:9px}.rg-message{font-size:15px;line-height:1.75;min-height:79px}.rg-hint{margin:9px 0 11px;font-size:12px;min-height:20px}
 .rg-actions{padding-top:12px;gap:7px}.rg-actions button{min-height:42px;padding:9px 12px;font-size:14px}.rg-actions .rg-next{min-width:132px}.rg-progress{margin-top:12px;gap:3px}
 .rg-target-action{font-size:14px;padding:6px 8px}.rg-target-action::after{font-size:16px}
 .rg-lesson{padding:11px 12px;margin-top:7px}.rg-field-list{gap:9px}.rg-field-list dt{font-size:12px}.rg-field-list dd{font-size:11px}.rg-photo-example{gap:10px}.rg-photo-example strong{font-size:12px}.rg-signup-status{gap:6px}.rg-signup-status li{display:block}.rg-signup-status li>span{margin-bottom:5px}.rg-signup-status strong{font-size:11px}.rg-signup-status small{font-size:10px}.rg-signup-path{margin-bottom:9px}
 body.guide-active .main-nav.grouped-nav.open{width:47%;min-width:155px;max-height:30dvh;padding:7px;left:12px}
 body.guide-active .main-nav.grouped-nav .nav-link,body.guide-active .main-nav .nav-group>summary{font-size:13px;min-height:40px;padding:8px}
 body.guide-active .main-nav .nav-submenu{padding-left:5px}
}
@media(max-height:550px){.rg-dialogue{max-height:calc(100% - 82px);padding:14px 18px}.rg-dialogue::before{display:none}.rg-message{min-height:50px}.rg-dialogue h2{font-size:21px}.rg-byline{margin-bottom:7px}.rg-hint{margin:8px 0}.rg-actions{padding-top:10px}.rg-character{height:90%;bottom:0;width:48%;right:0}}
@media(prefers-reduced-motion:reduce){.rg-guide *{animation:none!important;transition:none!important}}

/* The guide displays the same signup markup as the live account dialog. */
.rg-signup-window{position:absolute;left:5%;width:46%;max-width:700px;z-index:1;display:flex;flex-direction:column;overflow:hidden;border:1px solid #f2e9ff;border-radius:19px;background:linear-gradient(155deg,#fff,#faf6ff);color:#292035;box-shadow:0 16px 44px #160d2b30,inset 0 1px #fff}
.rg-signup-window[hidden]{display:none!important}
.rg-signup-window .dialog-head{position:static;flex-shrink:0;padding:15px 22px;background:linear-gradient(110deg,#faf5ff,#eee4fb);border-bottom:1px solid #e1d4ef}
.rg-signup-window .dialog-head h2{font-size:21px}
.rg-form-label{font-size:11px;color:#79549a;padding:4px 8px;border:1px solid #d6c1ed;border-radius:30px;background:#ffffff94}
.rg-signup-window .dialog-body{min-height:0;flex:1;overflow-y:auto;padding:20px 24px;scrollbar-width:thin;overscroll-behavior:contain}
.rg-signup-window .signup-step{transition:background .2s}
.rg-signup-window .rg-form-focus{outline:2px solid #b18ae5;outline-offset:5px;border-radius:9px;background:linear-gradient(120deg,#ede0ff6b,#f9f2ff80);animation:rg-field-glow 2.8s ease-in-out infinite}
.rg-signup-window .signup-photo-example{max-width:360px}
.rg-signup-window .signup-photo-preview{max-height:82px;overflow:hidden}
.rg-guide.has-signup-form .rg-dialogue{padding-top:19px;padding-bottom:18px}
.rg-guide.has-signup-form .rg-dialogue::before{display:none}
.rg-guide.has-signup-form .rg-message{min-height:0}
@media(max-width:1250px){.rg-signup-window{left:4%;width:48%}}
@media(max-width:700px){
 .rg-signup-window{left:12px;width:calc(100% - 100px);border-radius:13px}
 .rg-signup-window .dialog-head{padding:10px 13px}.rg-signup-window .dialog-head h2{font-size:18px}.rg-form-label{font-size:10px}
 .rg-signup-window .dialog-body{padding:13px 16px}
 .rg-guide.has-signup-form .rg-character{width:42%;right:-12%;height:46%;bottom:45%}
 .rg-guide.has-signup-form .rg-sparkles{left:calc(100% - 80px)}
 .rg-guide.has-signup-form .rg-dialogue{max-height:43%;padding:14px 17px}
 .rg-guide.has-signup-form .rg-message{font-size:14px;line-height:1.65}
 .rg-guide.has-signup-form .rg-dialogue h2{font-size:21px}
 .rg-guide.has-signup-form .rg-hint{font-size:11px;margin:7px 0}
}
/* Keep the upload control visible beside the guide's explanation. */
.rg-signup-window #signup-photo-preview{display:none}
.rg-signup-window .signup-photo-example{padding:10px;max-width:330px}
.rg-signup-window .signup-photo-example img{width:100%;height:150px;object-fit:contain}
.rg-signup-window #signup-photo{font-size:12px;padding:8px;min-height:40px}
.rg-signup-window #signup-password{border:1px solid var(--line,#d9cfed);border-radius:10px;padding:13px 15px;width:100%}
@media(max-width:700px){
 .rg-signup-window .signup-photo-example{padding:7px;margin:7px 0}
 .rg-signup-window .signup-photo-example figcaption{font-size:10px;margin-bottom:5px}
 .rg-signup-window .signup-photo-example img{height:100px}
 .rg-signup-window #signup-photo-location{font-size:11px;line-height:1.5;margin:3px 0}
 .rg-signup-window #signup-photo-help,.rg-signup-window #signup-photo-status{font-size:10px;line-height:1.5;margin:3px 0}
}