.tutorial-dialog{width:min(570px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #5b7651;border-radius:22px;background:#142019;overflow:hidden}
.tutorial-dialog[open]{display:flex;flex-direction:column}
.tutorial-header{display:flex;align-items:center;gap:12px;padding:18px 22px 12px;flex:none}
.tutorial-header .eyebrow{color:var(--lime);margin-right:auto}
#tutorial-step{font-size:12px;color:#a9b8a1;white-space:nowrap}
.tutorial-content{min-height:0;overflow:auto;padding:0 24px 10px;overscroll-behavior:contain}
.tutorial-content h2{font-size:35px;line-height:1.08;margin:18px 0 12px;letter-spacing:-.5px}
#tutorial-body{font-size:15px;line-height:1.65;color:#ecf2e4;margin:0 0 12px}
#tutorial-tip{font-size:12px;line-height:1.6;color:#bacdb1;background:#263623;padding:12px;border-radius:10px;margin:0}
.tutorial-demo{height:160px;position:relative;overflow:hidden;border:1px solid #344d32;border-radius:14px;background:radial-gradient(ellipse at 50% 85%,#36512a,transparent 70%),#0e1712;isolation:isolate}
.tutorial-floor{position:absolute;width:230px;height:115px;border:2px solid #729c43;border-radius:50%;left:50%;top:23px;transform:translateX(-50%);box-shadow:0 0 30px #caff5510}
.tutorial-orb{position:absolute;width:54px;height:54px;border-radius:50%;left:calc(50% - 83px);top:51px;background:radial-gradient(circle at 30% 25%,#f5ffd4,#caff55 38%,#78aa2c 84%);box-shadow:0 7px 0 #091407,0 0 24px #caff5520;z-index:2}
.tutorial-orb::after{content:'•ᴗ•';position:absolute;inset:0;display:grid;place-items:center;color:#24330d;font:bold 20px Arial}
.tutorial-orb.other{width:40px;height:40px;top:58px;left:calc(50% + 37px);background:radial-gradient(circle at 30% 25%,#ffe2c8,#ff987b 42%,#aa573f)}
.tutorial-ring{position:absolute;inset:-7px;border:2px solid #caff55;border-radius:50%;border-top-color:transparent}
.tutorial-arrow{position:absolute;color:var(--lime);font:25px Arial;left:65px;top:14px}
.tutorial-food{position:absolute;left:calc(50% - 7px);top:75px;width:7px;height:7px;background:#deffa3;transform:rotate(45deg);box-shadow:18px 9px #9cda6c,-17px -19px #e0ffb2;z-index:1}
.tutorial-portal{display:none;position:absolute;left:calc(50% + 27px);top:43px;width:65px;height:65px;border-radius:50%;background:radial-gradient(circle,#060913 37%,#8d67d599 43%,#bc94ff35 67%,transparent 70%);box-shadow:0 0 20px #ac8bff33}
.tutorial-label{position:absolute;bottom:13px;font-size:9px;letter-spacing:1px;color:#d3e6c6;font-weight:700;left:calc(50% - 89px)}
.tutorial-label.second{left:auto;right:calc(50% - 103px)}
.tutorial-demo[data-scene="absorb"] .tutorial-orb:not(.other){width:67px;height:67px;top:45px}
.tutorial-demo[data-scene="split"] .tutorial-orb.other{background:radial-gradient(circle at 30% 25%,#f5ffd4,#caff55 38%,#78aa2c 84%);width:38px;height:38px;top:59px}
.tutorial-demo[data-scene="vortex"] .tutorial-portal{display:block}
.tutorial-demo[data-scene="journey"] .tutorial-orb::after{content:'✓'}
.tutorial-demo[data-scene="journey"] .tutorial-orb.other::after{content:'★';color:#142015}
.tutorial-demo[data-scene="journey"] .tutorial-food{width:24px;height:5px;transform:none;box-shadow:0 10px #e0ffb2,0 20px #56604d;top:61px}
.tutorial-demo.replay .tutorial-orb:not(.other){animation:tutorial-dash 1.2s both}
.tutorial-demo.replay[data-scene="push"] .other,.tutorial-demo.replay[data-scene="vortex"] .other{animation:tutorial-fall 1.2s both}
.tutorial-demo.replay[data-scene="absorb"] .other{animation:tutorial-eaten 1.2s both}
.tutorial-demo.replay[data-scene="split"] .tutorial-orb:not(.other){animation:tutorial-split-origin 1.2s both}
.tutorial-demo.replay[data-scene="split"] .other{animation:tutorial-split 1.2s both}
.tutorial-demo.replay[data-scene="journey"] .tutorial-orb{animation:tutorial-earned 1.2s both}
.tutorial-demo.replay[data-scene="move"] .tutorial-orb:not(.other){animation:tutorial-move 1.2s both}
.tutorial-demo[data-scene="dash"]:not(.replay) .tutorial-arrow{transform-origin:-38px 13px;animation:tutorial-aim 3s linear infinite}
#tutorial-try{margin:10px 0 0;font-size:12px;min-height:38px;color:#d8edc7}
.tutorial-footer{flex:none;padding:12px 24px 18px;border-top:1px solid #344530;background:#142019}
#tutorial-progress{display:flex;gap:5px;margin:0 0 14px}
#tutorial-progress span{height:3px;flex:1;background:#3d5038;border-radius:3px}
#tutorial-progress .done{background:var(--lime)}
.tutorial-buttons{display:flex;gap:10px}
.tutorial-buttons .secondary-button{width:86px;flex:none;margin:0;font-size:12px}
.tutorial-buttons .primary-button{font-size:20px;justify-content:center}
.tutorial-links{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.tutorial-links button{font-size:11px;margin:0;min-height:34px;padding:6px 0}
@media(max-height:650px) and (max-width:600px){.tutorial-demo{height:104px!important}.tutorial-floor{height:78px;top:8px}.tutorial-orb{top:25px!important;width:40px;height:40px}.tutorial-orb.other{top:29px!important;width:32px;height:32px}.tutorial-orb::after{font-size:16px}.tutorial-arrow{left:53px;top:8px;font-size:21px}.tutorial-demo[data-scene="dash"]:not(.replay) .tutorial-arrow{transform-origin:-33px 12px}.tutorial-food{top:43px!important}.tutorial-content h2{font-size:26px!important}#tutorial-try{min-height:30px;margin-top:4px}}
@keyframes tutorial-dash{0%,20%{transform:translateX(0)}60%,100%{transform:translateX(71px)}}
@keyframes tutorial-aim{to{transform:rotate(360deg)}}
@keyframes tutorial-move{0%{transform:translateX(0)}100%{transform:translateX(57px)}}
@keyframes tutorial-fall{0%,48%{transform:translate(0);opacity:1}100%{transform:translate(28px,22px) scale(.1);opacity:0}}
@keyframes tutorial-eaten{0%,48%{transform:scale(1);opacity:1}100%{transform:scale(.05);opacity:0}}
@keyframes tutorial-split-origin{0%{transform:scale(1)}100%{transform:scale(.7)}}
@keyframes tutorial-split{0%{transform:translateX(-85px) scale(.3)}100%{transform:translateX(0) scale(1)}}
@keyframes tutorial-earned{0%{transform:scale(.85)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@media(max-width:400px){.tutorial-header{padding:12px 16px 8px}.tutorial-content{padding:0 16px 10px}.tutorial-content h2{font-size:29px;margin:12px 0 8px}#tutorial-body{font-size:13px;line-height:1.5}#tutorial-tip{font-size:11px;padding:9px}.tutorial-demo{height:132px}.tutorial-floor{top:10px}.tutorial-orb{top:36px}.tutorial-orb.other{top:43px}.tutorial-food{top:59px}.tutorial-demo[data-scene="absorb"] .tutorial-orb:not(.other){top:30px}.tutorial-footer{padding:10px 16px 12px}.tutorial-buttons .primary-button{font-size:18px}.tutorial-buttons .secondary-button{width:66px}}
@media(max-height:520px) and (min-width:600px){.tutorial-dialog{width:min(800px,calc(100vw - 24px))}.tutorial-header{padding:10px 20px}.tutorial-content{display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:22px;padding:0 20px 10px}.tutorial-demo{grid-column:1;grid-row:1/4;height:140px;align-self:center}.tutorial-content h2{grid-column:2;font-size:27px;margin:0 0 7px}#tutorial-body{grid-column:2;font-size:12px;line-height:1.45;margin:0 0 7px}#tutorial-tip{grid-column:2;font-size:10px;padding:8px;line-height:1.4}#tutorial-try{grid-column:1;grid-row:4;margin:2px 0}.tutorial-footer{padding:8px 20px}#tutorial-progress{margin-bottom:8px}.tutorial-links{margin-top:0}.tutorial-buttons .primary-button,.tutorial-buttons .secondary-button{min-height:36px;padding:6px}.tutorial-links button{min-height:25px}}
@media(prefers-reduced-motion:reduce){.tutorial-demo.replay .tutorial-orb{animation-duration:1ms!important;animation-delay:0s!important}.tutorial-arrow{animation:none!important}}