.tutorial-shell{color:#fff4dc;scrollbar-color:#bd975b #201710;scrollbar-width:thin;background:#130e09;max-width:480px;height:100dvh;margin:auto;position:relative;overflow-y:auto;padding:0!important}.tutorial-scene{min-height:100%;padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 56px);isolation:isolate;background-position:50%;background-size:cover;flex-direction:column;display:flex}.tutorial-cast{flex:1;justify-content:center;align-items:flex-end;min-height:300px;display:flex;position:relative;overflow:hidden}.tutorial-cast>img{object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 12px #0008);width:100%;height:100%;max-height:60dvh;animation:.6s ease-out both tutorial-reveal}.tutorial-cast.count-1>img{max-height:none;position:absolute;inset:0}.tutorial-cast.count-2{min-height:380px}.tutorial-cast.count-2>img{object-fit:contain;width:75%;height:83%;position:absolute}.tutorial-cast.count-2>img:first-child{top:0;left:-12%}.tutorial-cast.count-2>img:last-child{animation-delay:.2s;bottom:0;right:-12%}.tutorial-copy{background:#1c140ff0;border:1px solid #b28d51;border-radius:9px;padding:18px;position:relative;box-shadow:0 8px 24px #0009}.tutorial-copy h1{color:#eecb83;margin:0 0 10px;font-size:16px}.tutorial-copy p,.tutorial-notice p{white-space:pre-line;margin:0 0 18px;font-size:15px;line-height:1.9}.tutorial-next{width:100%;min-height:48px!important}.tutorial-copy label{gap:8px;margin-bottom:16px;font-size:13px;display:grid}.tutorial-copy input{color:#fff;background:#100d0a;border:1px solid #ad8e59;border-radius:4px;width:100%;padding:12px;font-size:16px}.tutorial-progress{justify-content:center;gap:10px;margin:14px;display:flex}.tutorial-progress i{background:#746447;border-radius:50%;width:7px;height:7px}.tutorial-progress i[data-active=true]{background:#f1d392;box-shadow:0 0 7px #f1d392}.tutorial-rewards{align-items:center;gap:8px;width:100%;margin:auto;display:flex}.tutorial-rewards figure{background:#1c130de8;border:1px solid #ae8e54;border-radius:6px;flex:1;min-width:0;margin:0;overflow:hidden}.tutorial-rewards img{aspect-ratio:2/3;object-fit:cover;width:100%;display:block}.tutorial-rewards figcaption{text-align:center;gap:5px;padding:10px 3px;font-size:13px;display:grid}.tutorial-rewards figcaption span{color:#e1cfa9;font-size:10px}.tutorial-rewards.is-skills img{aspect-ratio:1;object-fit:contain;padding:10px}.tutorial-rewards.is-skills{gap:12px}.tutorial-header{background:#24190f;border-bottom:1px solid #ab8547;flex-wrap:wrap;gap:14px;padding:18px;display:flex}.tutorial-header strong{flex:1}.tutorial-shell .rd-footer{max-width:480px}.tutorial-shell button:disabled{opacity:.4;cursor:default}.tutorial-shell .rd-main[inert]{filter:brightness(.6)}.tutorial-notice{color:#fff0d4;background:#21170f;border:1px solid #bb965a;border-radius:10px;width:390px;max-width:calc(100vw - 36px);max-height:80dvh;padding:24px;overflow:auto;box-shadow:0 15px 60px #0009}.tutorial-notice::backdrop{background:#0009}.tutorial-notice button{width:100%;min-height:46px}.tutorial-review{z-index:50;background:#21170ff5;border:1px solid #9b7b45;border-radius:5px;max-width:310px;padding:5px 10px;font-size:11px;position:fixed;bottom:5px;right:max(8px,50vw - 232px)}.tutorial-review summary{cursor:pointer}.tutorial-review button{min-height:32px;margin:12px 0;display:block}.tutorial-error{z-index:100;color:#fff;background:#471b12;border:1px solid #fa8;width:min(92vw,430px);padding:14px;position:fixed;top:12px;left:50%;transform:translate(-50%)}.tutorial-error button{margin-top:8px;display:block}.tutorial-loading{text-align:center;place-content:center;padding:24px;display:grid}@keyframes tutorial-reveal{0%{opacity:0;translate:0 16px}to{opacity:1;translate:0}}.tutorial-review{z-index:500}.tutorial-shell.is-complete .tutorial-review{bottom:84px}.tutorial-shell.is-complete{padding-bottom:90px!important}@media (prefers-reduced-motion:reduce){.tutorial-cast>img{animation:none!important}}@media (max-height:700px){.tutorial-cast{min-height:230px}.tutorial-cast.count-2{min-height:280px}.tutorial-copy{padding:13px}.tutorial-copy p{font-size:14px}}.tutorial-shell,.tutorial-notice{font-family:var(--font-ui),sans-serif}.tutorial-copy p,.tutorial-notice p{font-size:16px;line-height:1.6}.tutorial-copy h1{font-size:18px}.tutorial-copy label,.tutorial-rewards figcaption,.tutorial-rewards figcaption span{font-size:14px;line-height:1.4}.tutorial-next{white-space:nowrap;font-weight:700;color:#fff3df!important;background:#9e353b!important;border-color:#ba6b59!important;font-size:16px!important}.tutorial-notice.rd-modal{flex-direction:column;width:min(390px,100vw - 32px);max-height:80dvh;margin:0;padding:0;display:flex;position:relative;inset:auto;overflow:hidden;transform:none}.tutorial-notice .rd-modal-header,.tutorial-notice .rd-modal-footer{flex-shrink:0}.tutorial-notice .rd-modal-body{min-height:0;padding:16px;overflow:auto}.tutorial-notice .rd-modal-body p{white-space:pre-line;margin:0}.tutorial-review{font-size:13px}.tutorial-review summary{align-items:center;min-height:44px;display:flex}.tutorial-review button,.tutorial-error button{min-height:44px;font-size:14px}.tutorial-scene{animation:.35s ease-out both tutorial-scene-fade}.tutorial-cast>img{animation-name:tutorial-character-fade;animation-duration:.7s}.tutorial-cast.count-2>img:last-child{animation-delay:.2s}@keyframes tutorial-scene-fade{0%{opacity:0}to{opacity:1}}@keyframes tutorial-character-fade{0%{opacity:0}to{opacity:1}}@media (max-width:360px){.tutorial-scene{padding-left:12px;padding-right:12px}.tutorial-notice.rd-modal{width:calc(100vw - 24px)}}@media (prefers-reduced-motion:reduce){.tutorial-scene{animation:none}}.tutorial-scene{position:relative}.tutorial-scene>.g4-home-effect{z-index:1}.tutorial-scene>.tutorial-cast{z-index:2}.tutorial-scene>.tutorial-copy{z-index:3}.tutorial-card-art{background:url(/creative/card-backgrounds/R.png) 50%/cover;position:relative}.tutorial-card-art>img:not(.tutorial-card-frame){width:100%;height:auto;display:block}.tutorial-card-art .tutorial-card-frame{object-fit:fill;pointer-events:none;width:116%;max-width:none;height:116%;position:absolute;inset:-8%}.tutorial-rewards figure{overflow:visible}.tutorial-copy>p{min-height:4.5em}.tutorial-rewards.is-skills .tutorial-card-frame{aspect-ratio:auto;padding:0}.tutorial-cast:has(.tutorial-rewards){overflow:visible}.tutorial-card-art{isolation:isolate;background:0 0}.tutorial-card-art:before{content:"";z-index:-1;background:url(/creative/card-backgrounds/R.png) 50%/cover;position:absolute;inset:-8%}.tutorial-rewards.is-skills figure{background:0 0;border:0}.tutorial-skill-art{background:0 0}.tutorial-rewards .tutorial-character-card{background:0 0;border:0;width:100%;min-height:0;margin:0;padding:0}.tutorial-rewards .tutorial-character-card img{border:0;border-radius:0}