/* Letter V variant of the approved storybook lesson system. */
.storybook-letters main.app{width:100%;max-width:1460px;margin:0;padding:clamp(18px,2.5vw,36px) clamp(16px,2vw,30px) 12px;border:12px solid #fffef7;border-radius:clamp(28px,4vw,60px);background:linear-gradient(135deg,#fffaf0,#fffcf4 55%,#fff9e9);box-shadow:0 12px 36px #5f805a24,inset 0 0 40px #f1dfb515}
.storybook-letters .lesson-heading{margin-bottom:14px}
.storybook-letters .top{width:fit-content;max-width:100%;margin:0 auto 14px;gap:14px;padding:7px 14px;border:2px solid #f3e7cb;border-radius:999px;background:#fff9eb}
.storybook-letters .letter{font-size:clamp(36px,4.5vw,62px);color:#ed641b;line-height:1;letter-spacing:2px;padding:0 9px;text-shadow:0 2px 0 #fff;font-weight:1000}
.storybook-letters .topbutton,.storybook-letters .topbutton#sound{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:9px 15px;border:2px solid #f1e3c3;border-radius:999px;background:#fffdf4;color:#344e6b;box-shadow:0 3px 7px #dcc79524;font-size:clamp(16px,1.8vw,25px);text-shadow:none}
.storybook-letters .topbutton .ico{width:26px;height:26px;color:#238ff7;margin:0;vertical-align:0}
.storybook-letters .modes{width:min(600px,85%);margin:0 auto 10px;gap:0}
.storybook-letters .mode,.storybook-letters .mode.learn,.storybook-letters .mode.learn.active{flex:1;min-width:0;min-height:clamp(52px,6vh,68px);padding:10px 15px;border:4px solid transparent;border-radius:999px;background:transparent;color:#4d6681;box-shadow:none;text-shadow:none;filter:none;outline:none;font-size:clamp(18px,2.15vw,30px)}
.storybook-letters .mode.active,.storybook-letters .mode.learn.active{border-color:white;background:linear-gradient(#43afff,#2288f6);color:#fff;box-shadow:0 5px 10px #d9c38b40;text-shadow:0 1px #226db7;outline:none}
.storybook-letters .mode .ico{width:clamp(24px,2.3vw,32px);height:clamp(24px,2.3vw,32px);margin-right:8px;vertical-align:-5px}
.storybook-letters .banner{min-height:28px;margin:0 auto 12px;padding:0;background:none;border:0;box-shadow:none;color:#4d6681;font-size:clamp(17px,1.9vw,25px);font-weight:800}
.storybook-letters .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);padding:0}
.storybook-letters .card,.storybook-letters .card[data-word]{min-height:clamp(260px,40vh,430px);padding:16px 12px 18px;border:8px solid #fff;border-radius:clamp(24px,3vw,40px);outline:none;background:linear-gradient(140deg,var(--card-top),var(--card-bottom));box-shadow:0 7px 13px #b7975224}
.storybook-letters .picture{display:block;width:100%;height:clamp(165px,25vh,280px);flex:1;min-height:0;object-fit:contain;background:transparent;padding:4px 0;border-radius:0;mix-blend-mode:multiply}
.storybook-letters .word{flex:none;font-size:clamp(29px,3vw,43px);font-weight:1000;line-height:1.15;margin-top:10px;color:#082449;text-shadow:none;letter-spacing:0}
.storybook-letters .word b{color:#eb641c}
.storybook-letters .cn{font-size:clamp(16px,1.65vw,23px);font-weight:700;margin-top:6px;color:#4d6681}
.storybook-letters.quiz .card{padding-bottom:18px}
.storybook-letters.quiz .card-sound{display:none}
.storybook-letters.quiz .top{display:none}
.storybook-letters .card.playing{outline:4px solid #489ff5;outline-offset:-4px;box-shadow:0 7px 18px #3299f538}
.storybook-letters .card.correct{outline:4px solid #489759;outline-offset:-4px}
.storybook-letters .card.wrong{outline:4px solid #dba54e;outline-offset:-4px}
.storybook-letters .quiz-controls{margin-top:18px;gap:14px}
.storybook-letters .quiz-controls .action{min-height:50px;font-size:19px}
.storybook-letters main>.stars{margin:2px auto 12px}
.storybook-letters .win .lion-art{visibility:visible}
@media(max-width:900px){.storybook-letters main.app{margin:0;padding:20px 16px 12px;border-width:8px}.storybook-letters .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.storybook-letters .card,.storybook-letters .card[data-word]{min-height:250px;padding:16px 12px;border-width:6px;border-radius:28px}.storybook-letters .picture{height:clamp(150px,22vh,210px)}.storybook-letters .word{font-size:34px}.storybook-letters .cn{font-size:18px}}
@media(min-width:901px) and (max-height:760px){.storybook-letters main.app{padding:16px 20px 8px;border-width:9px}.storybook-letters .lesson-heading{margin-bottom:10px}.storybook-letters .top{padding:5px 10px;margin-bottom:10px;gap:10px}.storybook-letters .letter{font-size:42px}.storybook-letters .topbutton,.storybook-letters .topbutton#sound{font-size:18px;min-height:44px;padding:7px 12px}.storybook-letters .modes{margin-bottom:8px}.storybook-letters .mode,.storybook-letters .mode.learn,.storybook-letters .mode.learn.active{min-height:48px;font-size:22px;padding:7px 12px}.storybook-letters .card,.storybook-letters .card[data-word]{min-height:245px;padding:13px 10px;border-width:6px}.storybook-letters .picture{height:clamp(145px,23vh,185px)}.storybook-letters .word{font-size:32px}.storybook-letters .cn{font-size:18px}.storybook-letters .banner{font-size:18px;margin-bottom:10px}}
@media(max-width:520px){.storybook-letters main.app{margin:0;padding:15px 10px 8px;border-width:6px;border-radius:28px}.storybook-letters .top{width:100%;padding:7px 6px;gap:6px;border-radius:22px;flex-wrap:wrap}.storybook-letters .letter{font-size:34px;padding:0 4px}.storybook-letters .topbutton,.storybook-letters .topbutton#sound{font-size:14px;padding:9px 7px;gap:4px;min-height:46px}.storybook-letters .topbutton .ico{width:21px;height:21px}.storybook-letters .modes{width:100%;margin-bottom:10px}.storybook-letters .mode,.storybook-letters .mode.learn,.storybook-letters .mode.learn.active{min-height:50px;font-size:17px;padding:8px 4px;border-width:3px}.storybook-letters .mode .ico{width:22px;height:22px;margin-right:4px}.storybook-letters .banner{font-size:16px;margin-bottom:13px}.storybook-letters .cards{gap:12px}.storybook-letters .card,.storybook-letters .card[data-word]{min-height:205px;padding:12px 7px;border-width:5px;border-radius:23px}.storybook-letters .picture{height:clamp(120px,19vh,160px)}.storybook-letters .word{font-size:30px;margin-top:8px}.storybook-letters .cn{font-size:15px}.storybook-letters.quiz .card{padding-bottom:12px}.storybook-letters .quiz-controls .action{font-size:17px;min-width:120px}}