.bee-story-card{width:100%;position:relative;display:grid;grid-template-columns:190px 1fr 88px;align-items:center;gap:30px;padding:0 32px 0 0;margin:20px 0 26px;background:#fff9df;border:1px solid #e6dfb8;border-radius:26px;overflow:hidden;text-align:left;box-shadow:0 7px 0 #83975612;transition:transform .2s}
.bee-story-card:hover{transform:translateY(-2px)}
.bee-story-card>img{width:190px;height:190px;object-fit:cover}
.bee-story-card-copy{display:grid;gap:9px;color:#3e583c}
.bee-story-card-copy small{font-size:12px;letter-spacing:.12em;color:#8c7848}
.bee-story-card-copy strong{font-size:28px;line-height:1.35}
.bee-story-card-copy>span{font-size:13px;color:#76805a}
.bee-story-card-play{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;color:#fff9d7;background:#4f7850;box-shadow:0 5px 0 #315a39}
.bee-story-card-play svg{width:38px;height:38px}
.bee-story{max-width:760px;margin:0 auto 24px}
.bee-story-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px}
.bee-story-top>button{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:16px;background:#fdfcf0;border:1px solid #d7dfc6;touch-action:manipulation}
.bee-story-top>button svg{width:27px;height:29px}
.bee-story-progress{display:flex;align-items:center;gap:9px;justify-content:center}
.bee-story-progress>span{height:16px;width:16px;border-radius:50%;background:#dde3cd;color:#fff9df;font-size:12px;display:grid;place-items:center;line-height:1}
.bee-story-progress>span.current{background:#efc45e;box-shadow:0 0 0 4px #f0e8c8}
.bee-story-progress>span.done{background:#71945f}
.bee-story-title{text-align:center;font-size:25px;font-weight:600;letter-spacing:.07em;margin:10px 0 16px;line-height:1.45}
.bee-story-play-layout{max-width:660px;margin:auto}
.bee-story-board{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:28px;background:#e1edc8;box-shadow:0 6px 0 #91a56c24;isolation:isolate;touch-action:none}
#bee-story-scene{display:block;width:100%;height:100%;pointer-events:none}
.bee-story-targets{position:absolute;inset:0;pointer-events:none}
.bee-story-target{position:absolute;display:grid;place-items:center;width:19%;height:19%;min-height:56px;min-width:56px;padding:0;border:3px solid transparent;border-radius:50%;transform:translate(-50%,-50%);background:transparent;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.bee-story-target-large{width:29%;height:29%}
.bee-story-target:active{transform:translate(-50%,-50%)!important}
.bee-story-target:focus-visible{outline:4px solid #fffbdb;outline-offset:0;box-shadow:0 0 0 7px #516e41}
.bee-story-touch-mark{display:block;position:absolute;width:35px;height:40px;right:-3px;bottom:0;opacity:0;filter:drop-shadow(0 2px 2px #24432670);pointer-events:none}
.bee-story-touch-mark svg{display:block;width:100%;height:100%}
.bee-story-show-touch .bee-story-touch-mark{opacity:.95;animation:bee-story-tap 1.6s ease-in-out 3}
.bee-story-busy .bee-story-touch-mark{opacity:0;animation:none}
.bee-story-busy .bee-story-targets,.bee-story-busy .bee-story-target,.bee-story-busy .bee-story-tools{pointer-events:none}
.bee-story-tray{margin:18px 0 0;padding:10px 12px 14px;border-radius:24px;background:#e7edd9;border:1px solid #d6dfbf;box-shadow:0 5px 0 #a1ae7f24}
.bee-story-tray-hand{display:flex;align-items:center;justify-content:center;gap:10px;height:27px;color:#829369;margin-bottom:8px}
.bee-story-tray-hand>svg{width:23px;height:27px}
.bee-story-tray-hand>span{font-size:23px}
.bee-story-tray-hand[hidden]{display:none}
.bee-story-three-cards{display:flex;gap:4px}
.bee-story-three-cards i{width:13px;height:19px;background:#fffdf1;border:1.5px solid #819469;border-radius:3px}
.bee-story-tools{display:flex;gap:12px;justify-content:center}
.bee-story-tool{flex:1;min-width:0;position:relative;display:grid;place-items:center;background:#fffdf0;border:2px solid #d7dfc5;border-radius:20px;padding:8px;box-shadow:0 5px 0 #bac6a4;touch-action:manipulation}
.bee-story-tool img{width:100%;height:112px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 1px #4c5d4020)}
.bee-story-tool[aria-pressed=true]{background:#f7fbdc;border-color:#557e43;box-shadow:0 4px 0 #547040,0 0 0 2px #759954}
.bee-story-chosen{display:none;position:absolute;top:6px;right:7px;background:#608345;color:#fffcdf;width:22px;height:22px;border-radius:50%;font-size:15px;place-items:center}
.bee-story-tool[aria-pressed=true] .bee-story-chosen{display:grid}
.bee-story-tool.bee-story-answer{animation:bee-story-answer 1.4s ease-in-out infinite}
.bee-story-choose{animation:bee-story-choose .7s ease-in-out 2}
.bee-story-return{width:100%;display:flex;align-items:center;justify-content:center;gap:15px;border:2px solid #9eb482;background:#fffdf0;border-radius:20px;min-height:112px;padding:5px;color:#56733e;touch-action:manipulation}
.bee-story-return>img{object-fit:contain;width:90px;height:90px}
.bee-story-return>svg{width:70px;height:92px}
.bee-story-return>svg:last-child{width:30px;height:42px}
.bee-story-return>span{font-size:30px}
.bee-story-again,.bee-story-exit{display:flex;align-items:center;justify-content:center;gap:20px;min-height:112px;flex:1;background:#fffbee;border:2px solid #b6c49d;border-radius:20px;padding:5px;color:#547147;touch-action:manipulation}
.bee-story-again img{height:85px;width:85px;border-radius:16px;object-fit:cover}
.bee-story-again>span{font-size:44px}
.bee-story-again svg{width:36px;height:36px}
.bee-story-exit{flex:0 0 90px}
.bee-story-exit svg{height:38px;width:38px}
.bee-story-loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;background:#f5f6e8;color:#536e43;padding:20px;text-align:center;font-size:14px;z-index:4}
.bee-story-loading[hidden]{display:none}
.bee-story-loading button{width:70px;height:70px;font-size:42px;background:#fffdf0;border:2px solid #b6c49d;border-radius:50%;color:#547147}
.bee-story-spinner{width:40px;height:40px;border:4px solid #cfddbb;border-top-color:#648247;border-radius:50%;animation:bee-story-spin 1s linear infinite}
.bee-story-use-hook{animation:bee-story-hook var(--bee-duration) ease-in-out both}
.bee-story-peeling{transform-box:fill-box;transform-origin:bottom left;animation:bee-story-peel .85s ease-in-out both}
.bee-story-lifting{animation:bee-story-lift 1.45s ease-in-out both}
.bee-story-use-sponge{animation:bee-story-wipe var(--bee-duration) ease-in-out both}
.bee-story-use-bandage{animation:bee-story-patch var(--bee-duration) ease-in-out both}
.bee-story-use-fan{transform-box:fill-box;transform-origin:bottom left;animation:bee-story-fan .24s ease-in-out 4 alternate}
.bee-story-wind{stroke-dasharray:70 25;animation:bee-story-wind .3s linear infinite}
.bee-story-tool-wrong{animation:bee-story-wrong .6s ease-in-out both}
.bee-story-oops{animation:bee-story-oops .6s ease-out both}
.bee-story-soap{animation:bee-story-soap .65s ease-out both}
.bee-story-heart{animation:bee-story-heart 1.1s var(--bee-delay,0s) ease-out both}
.bee-story-departing{transform-origin:650px 650px;animation:bee-story-depart 1.8s ease-in-out forwards}
.bee-story-flying{transform:translate(0,-300px) scale(.68);transform-origin:650px 650px;animation:bee-story-hover 2.3s ease-in-out infinite}
.bee-story-flying>ellipse,.bee-story-departing>ellipse{opacity:0}
body.story-playing .site-footer{display:none}
@keyframes bee-story-tap{0%,100%{translate:4px 7px;scale:1}50%{translate:0 0;scale:.92}}
@keyframes bee-story-choose{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes bee-story-answer{0%,100%{box-shadow:0 5px 0 #bac6a4}50%{box-shadow:0 4px 0 #93a255,0 0 0 5px #ead377}}
@keyframes bee-story-spin{to{rotate:360deg}}
@keyframes bee-story-hook{0%{transform:translate(-80px,-100px);opacity:0}20%{transform:translate(0,0);opacity:1}65%{transform:translate(-65px,-80px)}100%{transform:translate(-170px,-150px);opacity:0}}
@keyframes bee-story-peel{0%,25%{transform:scale(1);opacity:1}70%{transform:scale(.75,1.12);opacity:.9}100%{transform:translate(-90px,-120px) scale(.15);opacity:0}}
@keyframes bee-story-lift{0%,15%{transform:translate(0,0)}45%{transform:translate(70px,-125px) rotate(-3deg)}100%{transform:translate(215px,65px)}}
@keyframes bee-story-wipe{0%,100%{transform:translate(-60px,30px)}25%,75%{transform:translate(45px,-16px)}50%{transform:translate(-45px,26px)}}
@keyframes bee-story-patch{0%{transform:translate(-85px,80px);opacity:0}40%,70%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes bee-story-fan{from{rotate:-12deg}to{rotate:13deg}}
@keyframes bee-story-wind{to{stroke-dashoffset:95}}
@keyframes bee-story-wrong{0%,100%{opacity:0;transform:translate(0,-15px)}25%,75%{opacity:1;transform:translate(-15px,5px)}50%{opacity:1;transform:translate(15px,-5px)}}
@keyframes bee-story-oops{0%{opacity:0}30%{opacity:1}100%{opacity:0;translate:0 -30px}}
@keyframes bee-story-soap{0%{opacity:0;translate:0 20px}40%{opacity:1}100%{opacity:0;translate:0 -65px}}
@keyframes bee-story-heart{0%{opacity:0;translate:0 10px}20%{opacity:1}100%{opacity:0;translate:0 -120px}}
@keyframes bee-story-depart{0%{transform:translate(0,0) scale(1)}30%{transform:translate(-25px,-120px) scale(.95)}100%{transform:translate(0,-300px) scale(.68)}}
@keyframes bee-story-hover{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(max-width:700px){
  .bee-story-card{grid-template-columns:42% 1fr;gap:16px;padding:0;margin:15px 0 22px;border-radius:22px}
  .bee-story-card>img{width:100%;height:200px;object-fit:cover}
  .bee-story-card-copy{gap:8px;padding:0 12px 35px 0}
  .bee-story-card-copy small{font-size:10px;letter-spacing:.03em}
  .bee-story-card-copy strong{font-size:21px}
  .bee-story-card-copy>span{font-size:11px;line-height:1.7}
  .bee-story-card-play{position:absolute;right:16px;bottom:14px;width:42px;height:42px;box-shadow:0 3px 0 #315a39}
  .bee-story-card-play svg{height:24px;width:24px}
  body.story-playing .app-shell{padding:0 14px}
  body.story-playing .site-header{height:65px}
  body.story-playing .brand-caption{display:none}
  .bee-story{margin-bottom:14px}
  .bee-story-top{margin:0 0 5px}
  .bee-story-top>button{height:44px;width:44px;flex-basis:44px;border-radius:13px}
  .bee-story-title{font-size:20px;margin:7px 0 11px}
  .bee-story-board{border-radius:23px}
  .bee-story-tray{margin-top:14px;padding:8px 10px 12px;border-radius:22px}
  .bee-story-tools{gap:10px}
  .bee-story-tool{padding:5px;border-radius:17px}
  .bee-story-tool img{height:86px}
  .bee-story-tray-hand{height:22px;margin-bottom:7px}
  .bee-story-tray-hand>svg{height:23px;width:21px}
  .bee-story-progress{gap:8px}
  .bee-story-progress>span{height:13px;width:13px;font-size:10px}
  .bee-story-return,.bee-story-again,.bee-story-exit{min-height:92px;gap:12px}
  .bee-story-return>img,.bee-story-again img{height:75px;width:75px}
  .bee-story-return>svg{height:76px;width:60px}
  .bee-story-return>svg:last-child{width:27px;height:38px}
  .bee-story-exit{flex-basis:65px}
  .bee-story-touch-mark{width:28px;height:32px;right:-4px;bottom:-2px}
}
@media(max-width:350px){body.story-playing .site-header{height:55px}.bee-story-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.bee-story-tool img{height:68px}.bee-story-card-copy strong{font-size:18px}.bee-story-card>img{height:190px}.bee-story-top{gap:6px;margin-bottom:3px}.bee-story-progress{gap:7px}.bee-story-tray{margin-top:10px;padding:6px 10px 10px}}
@media(max-height:600px) and (orientation:landscape){
  body.story-playing .site-header{height:50px}
  .bee-story{max-width:900px;margin-bottom:5px}
  .bee-story-top{margin-bottom:7px}
  .bee-story-top>button{width:44px;height:44px;flex-basis:44px}
  .bee-story-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .bee-story-play-layout{display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:16px;align-items:center;max-width:calc(100dvh - 110px + 176px)}
  .bee-story-tray{margin:0;padding:8px}
  .bee-story-tools{flex-direction:column;gap:8px}
  .bee-story-tool{min-height:58px;padding:4px}
  .bee-story-tool img{height:58px}
  .bee-story-tray-hand{height:20px;margin-bottom:5px}
  .bee-story-return{flex-wrap:wrap;gap:3px}
  .bee-story-return>img{width:66px;height:66px}
  .bee-story-return>svg{width:40px;height:70px}
  .bee-story-again{flex-wrap:wrap;gap:5px}
  .bee-story-again img{height:64px;width:64px}
  .bee-story-exit{flex:1;min-height:55px}
}
@media(prefers-reduced-motion:reduce){
  .bee-story *{animation:none!important;transition:none!important}
  .bee-story-show-touch .bee-story-touch-mark{opacity:.9}
  .bee-story-peeling{opacity:.3}
  .bee-story-lifting{transform:translate(215px,65px)}
  .bee-story-answer{outline:4px solid #e6c963}
  .bee-story-departing{transform:translate(0,-300px) scale(.68)}
}