.arrow-bank{grid-template-columns:repeat(4,1fr)}.route-strip{grid-template-columns:repeat(var(--slots),minmax(0,1fr))}.route-move{animation:route-step 1s ease-in-out both}.slow .route-move{animation-duration:1.6s}.focus .pip-body,.moving .pip-body{animation:none!important}.blocked .pip-smile{opacity:0}.blocked .pip-frown{opacity:1}.world:has(.blocked){box-shadow:0 0 0 3px #d6987f}.route-scene .halloween-decor{opacity:.65}.route-strip .sequence-cell>button:first-child{font-size:11px}.route-strip .sequence-cell svg{width:65px;height:65px}.route-strip .blank-card{font-size:30px}.route-strip .sequence-cell.picked:before{content:'✎'}.arrow-bank button:disabled{opacity:.48}
@keyframes route-step{from{transform:translate(var(--dx),var(--dy))}to{transform:translate(0,0)}}
@media(min-width:1000px){.arrow-bank svg{width:48px;height:48px}.route-strip .sequence-cell svg{width:65px;height:65px}#controls>.route-strip{min-height:100px}.failure .result-extra{margin-top:5px;font-size:11px}}
@media(min-width:1000px) and (max-height:700px){.arrow-bank svg{width:36px;height:36px}.route-strip .sequence-cell svg{width:45px;height:45px}.route-strip .sequence-cell>button:first-child{font-size:10px}#controls>.route-strip{min-height:75px}}
@media(max-width:760px){.route-strip{gap:8px}.route-strip .sequence-cell svg{width:50px;height:50px}.route-strip .sequence-cell>button:first-child{font-size:10px;min-height:108px}.arrow-bank svg{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.route-move{animation:none;transform:none}}

.blocked .pip-body{animation:route-bump .45s ease-in-out 2}@keyframes route-bump{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

@media(min-width:1000px) and (max-height:700px){body[data-lesson-stage="7"] .arrow-bank svg{width:30px;height:30px}body[data-lesson-stage="7"] .arrow-bank button{padding:2px;font-size:10px}body[data-lesson-stage="7"] .route-strip .sequence-cell>button:first-child{padding:3px 2px;gap:2px}body[data-lesson-stage="7"] .route-strip .sequence-cell svg{width:36px;height:36px}body[data-lesson-stage="7"] .route-strip .blank-card{height:36px}body[data-lesson-stage="7"] #controls>.route-strip{min-height:62px}}

@media(min-width:1000px) and (max-height:700px){body[data-lesson-stage="7"] #controls{gap:3px;padding:8px 12px}}
/* A conversational greeting card, with two illustrated turns instead of repeated prose. */
body[data-lesson-stage="0"] #controls{background:#fffdf5;padding:24px 28px;border-color:#c7d1b5}
.hello-invitation{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}.hello-card-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce1ca;padding-bottom:12px}.hello-card-top .eyebrow{font-size:11px;letter-spacing:2px;margin:0}.hello-spark{font:28px Georgia;color:#dc9c79}.hello-turns{flex:1;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:20px 0}.hello-turn{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center}.hello-turn.pip-turn{grid-template-columns:minmax(0,1fr) 92px}.hello-avatar svg{width:92px;height:92px;display:block}.hello-turn small{display:block;font-size:10px;letter-spacing:1.1px;font-weight:bold;margin-bottom:9px;color:#71826a}.hello-bubble{position:relative;border:1px solid #d9ceb1;background:#fff2d4;border-radius:21px 21px 21px 5px;padding:17px 18px}.hello-bubble h2{font:400 clamp(25px,2.4vw,36px)/1.12 Georgia,serif;margin:0;color:#294f45;white-space:nowrap}.pip-turn .hello-bubble{background:#edf2df;border-color:#c3d0ae;border-radius:21px 21px 5px 21px;min-height:84px}.hello-bubble strong{font:400 35px/1.1 Georgia,serif;display:block}.hello-listening{display:block;font-size:12px;line-height:1.35;margin-top:5px;color:#71826a}.pip-avatar{background:#e1ebca;border-radius:50%;border:5px solid #f4f6e9;box-shadow:0 0 0 1px #cfdbb9;overflow:hidden}.pip-avatar svg{transform:translateY(10px)}.hello-connection{display:flex;gap:10px;align-items:center;justify-content:center;color:#bc9b70;font:24px Georgia;margin:0 44px}.hello-connection span{height:1px;flex:1;background:repeating-linear-gradient(90deg,#d9c6a3 0 3px,transparent 3px 8px)}.hello-card-bottom{padding-top:10px}.hello-card-bottom #hello{display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px;padding:14px 12px;border-radius:15px;margin:0}.hello-card-bottom #hello span{margin:0;font-size:20px}.hello-ready{font-size:12px!important;line-height:1.4!important;text-align:center;margin:12px 0 0!important;color:#71826a}.hello-wave-hand{transform-origin:58px 98px;animation:hello-hand-wave 1.8s ease-in-out 2}.busy .hello-wave-hand{animation:none}.has-reply{animation:hello-reply .4s ease-out both}
@keyframes hello-hand-wave{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}65%{transform:rotate(7deg)}}@keyframes hello-reply{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1000px) and (max-height:700px){body[data-lesson-stage="0"] #controls{padding:16px 22px}.hello-turns{padding:14px 0;gap:8px}.hello-avatar svg{width:72px;height:72px}.hello-turn{grid-template-columns:72px minmax(0,1fr);gap:11px}.hello-turn.pip-turn{grid-template-columns:minmax(0,1fr) 72px}.hello-bubble{padding:12px 15px}.hello-bubble h2{font-size:29px}.hello-bubble strong{font-size:29px}.pip-turn .hello-bubble{min-height:70px}.hello-turn small{margin-bottom:6px;font-size:9px}.hello-card-bottom #hello{padding:10px;font-size:15px}.hello-ready{margin-top:8px!important}.hello-card-top{padding-bottom:8px}}
@media(max-width:760px){body[data-lesson-stage="0"] #controls{padding:22px}.hello-turns{padding:26px 0}.hello-turn{grid-template-columns:70px minmax(0,1fr);gap:12px}.hello-turn.pip-turn{grid-template-columns:minmax(0,1fr) 70px}.hello-avatar svg{width:70px;height:70px}.hello-bubble{padding:15px 12px}.hello-bubble h2{font-size:27px}.hello-bubble strong{font-size:29px}.hello-turn small{font-size:9px;letter-spacing:.6px}.hello-ready{font-size:12px!important}}
.hello-turns{min-height:0;padding:12px 0;gap:8px}.hello-card-top,.hello-card-bottom{flex-shrink:0}.pip-avatar{width:92px;height:92px;box-sizing:border-box}.pip-avatar svg{width:100%;height:100%}
@media(min-width:1000px) and (max-height:700px){.pip-avatar{width:72px;height:72px}.hello-turns{padding:8px 0;gap:6px}}
@media(max-width:760px){.pip-avatar{width:70px;height:70px}.hello-turns{padding:26px 0}}

/* Four concrete direction pictures replace the abstract numbered intro. */
.direction-key{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:16px 0}.direction-key>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 2px;background:#edf2df;border-radius:12px}.direction-key svg{width:52px;height:52px}.direction-key span{font-size:13px;font-weight:bold}
@media(min-width:1000px) and (max-height:700px){.direction-key{margin:10px 0;gap:6px}.direction-key svg{width:38px;height:38px}.direction-key>div{padding:5px 2px}.direction-key span{font-size:11px}}