/* Four-picture story workbook: the illustrations are the primary activity. */
.story-image,.story-art{display:block;width:100%;height:auto}.story-art{aspect-ratio:10/7}
.four-panel-practice{color:#27493f}.four-panel-practice .scenario-heading h2{letter-spacing:-.025em}.four-panel-practice .scenario-free{font-size:1rem;padding:13px 17px;background:#f8f3e5;border-color:#e8dbc0}.four-panel-practice .scenario-free strong{font-size:.76rem;font-weight:500;color:#8a7652}
.story-workbook{background:#fffdf7;border:1px solid #e1dfd2;border-radius:24px;box-shadow:0 16px 44px #334c2e08;overflow:hidden;scroll-margin-top:92px}
.story-workbook-heading{padding:26px 30px;border-bottom:1px solid #e7e5d9;display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(100deg,#fffdf7,var(--scene-color))}
.story-workbook-heading>div{min-width:0}.story-category{display:inline-block;background:#ffffffa6;border:1px solid #dce3d4;border-radius:30px;padding:5px 12px;font-size:.73rem;color:#5c765e}.story-workbook-heading h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.4;letter-spacing:-.02em;margin:12px 0 9px;color:#2a4a3b}.story-workbook-heading p{font-size:.96rem;line-height:1.8;margin:0;max-width:670px;color:#596e5b}.story-page-number{font-size:2.6rem;line-height:1;font-weight:500;color:#8e9e86;white-space:nowrap;font-variant-numeric:tabular-nums}.story-page-number small{font-size:.8rem;margin-left:3px;color:#778773}
.story-cast{display:flex;align-items:center;flex-wrap:wrap;gap:7px 9px;margin-top:15px}.story-cast>strong{font-size:.68rem;color:#796f57;margin-right:2px}.story-cast>span{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 5px;border:1px solid #dfe2d5;border-radius:20px;background:#fffdf9d9;line-height:1}.story-cast i{width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #87968a55;flex:none}.story-cast b{font-size:.7rem;color:#4f6559}.story-cast small{font-size:.61rem;color:#7b887f}
.story-task-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:26px;padding:26px 28px}.story-task-main{min-width:0}.story-board-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}.story-board-heading>strong{font-size:.84rem;font-weight:600}.story-board-heading label{display:flex;align-items:center;gap:7px;flex-shrink:0;font-size:.74rem;color:#697b65;cursor:pointer}.story-board-heading input{width:16px;height:16px;accent-color:#4c7960}
.story-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.story-frame{margin:0;background:#fff;border:2px solid #dedfd3;border-radius:16px;overflow:hidden;min-width:0;transition:border-color .15s,box-shadow .15s}.story-frame.is-selected{border-color:#639073;box-shadow:0 0 0 2px #6f936015}.story-frame .story-picture-button{display:block;position:relative;width:100%;padding:0;border:0;border-radius:0;min-height:0;background:transparent;overflow:hidden;cursor:pointer}.story-frame .story-picture-button:disabled{opacity:1;cursor:default}.story-frame .story-picture-button:hover:enabled{transform:none;filter:brightness(1.02)}
.story-order-box{position:absolute;top:11px;left:11px;width:42px;height:42px;display:grid;place-items:center;background:#fffdf5f5;border:2px dashed #acb3a0;border-radius:10px;color:#929b85;font-size:1.2rem;font-weight:700;box-shadow:0 3px 9px #46543b0a}.is-selected .story-order-box{border:2px solid #497859;background:#497859;color:#fff}.story-frame figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 14px 5px 16px;border-top:1px solid #e5e5d9;background:#fffdf8}.story-frame figcaption strong{font-size:.77rem;font-weight:600;color:#60715b}.story-zoom-button{border:0;background:transparent;border-radius:5px;min-height:36px;padding:5px 0 5px 12px;color:#63755e;font-size:.72rem;gap:5px}.story-zoom-button>span{font-size:1.2rem;line-height:1}.story-picture-hint{margin:0;padding:12px 15px;background:#f7f8ef;color:#64745c;font-size:.77rem;line-height:1.8;border-top:1px solid #e5e5d9}
.story-order-tray{padding:0;margin:20px 0 16px;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.story-order-tray li{padding:12px 6px;border:1px dashed #d6dccd;background:#f6f7ef;border-radius:10px;text-align:center;min-width:0}.story-order-tray li.is-filled{background:#eff4e9;border-style:solid;border-color:#cddbc3}.story-order-tray span{display:block;font-size:.72rem;color:#75846a;margin-bottom:5px}.story-order-tray strong{display:block;font-size:.88rem;color:#526a4c}.story-order-tray li:not(.is-filled) strong{font-weight:400;color:#a0a991;font-size:.73rem}.story-order-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.story-order-actions>span{color:#79866c;font-size:.74rem;margin-right:auto}.story-order-actions>button{font-size:.75rem;padding:10px 12px;min-height:40px;border-color:#d9dfcf;color:#54704e}.story-order-actions>button.primary{background:#3c6d50;border-color:#3c6d50;color:#fff}
.story-speaking-guide{position:relative;background:#f3efe1;border:1px solid #e6dfcd;border-radius:16px;padding:23px 20px;align-self:start;overflow:hidden}.story-guide-mark{font:100px Georgia,serif;position:absolute;right:17px;top:-10px;color:#dcd2b9;line-height:1;pointer-events:none}.story-speaking-guide .eyebrow{font-size:.68rem;color:#9b8251;position:relative}.story-speaking-guide h4{font-size:1.12rem;line-height:1.8;margin:12px 0 24px;font-weight:600;color:#5a694e}.story-speaking-guide>ol{counter-reset:storyguide;padding:0;margin:0;list-style:none;display:grid;gap:20px}.story-speaking-guide>ol>li{counter-increment:storyguide;padding-left:29px;position:relative}.story-speaking-guide>ol>li:before{content:counter(storyguide);position:absolute;left:0;top:1px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e5dcc7;color:#8b754b;font-size:.7rem}.story-speaking-guide li strong{font-size:.82rem;color:#626e53}.story-speaking-guide li p{margin:6px 0 0;font-size:.77rem;line-height:1.85;color:#778168}.story-parent-note{border-top:1px solid #ded6c2;margin-top:23px;padding-top:18px}.story-parent-note strong{font-size:.73rem;color:#8a7650}.story-parent-note p{font-size:.73rem;line-height:1.85;margin:7px 0 0;color:#808772}
.story-check{margin:0 28px 28px;padding:20px 23px;display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid #dedcc7;border-radius:14px;background:#f7f1df}.story-check.is-correct{background:#edf4e8;border-color:#d7e2cc}.story-check strong{font-size:.93rem;color:#6f693f}.story-check.is-correct strong{color:#486c44}.story-check p{font-size:.78rem;line-height:1.8;margin:7px 0 0;color:#778063}.story-check .button{font-size:.82rem;flex-shrink:0}.story-answer{padding:28px;background:#fffdf8}.story-answer-heading h4{font-size:1.4rem;margin:7px 0 10px;color:#34553f}.story-answer-heading>p:last-child{font-size:.81rem;color:#7b836c;line-height:1.8}.story-model{padding:0;margin:24px 0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.story-model li{border:1px solid #e1e3d6;border-radius:13px;overflow:hidden;background:#fff}.story-model-image{position:relative}.story-model-image>span:last-child{position:absolute;left:8px;top:8px;display:grid;place-items:center;background:#fefaf0f0;border:1px solid #d4dcc9;color:#607951;border-radius:50%;width:27px;height:27px;font-size:.8rem;font-weight:700}.story-model li>strong{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 0;font-size:.86rem;color:#426843}.story-model strong small{font-size:.66rem;font-weight:400;color:#92987f}.story-model li>p{padding:0 14px 16px;font-size:.81rem;line-height:1.9;margin:9px 0 0;color:#607254}.story-clue{padding:17px 21px;background:#f2f5e9;border-left:3px solid #a9bc8d;border-radius:0 10px 10px 0}.story-clue strong{font-size:.82rem;color:#687949}.story-clue p{font-size:.83rem;line-height:1.8;margin:7px 0 0;color:#738164}.story-followup{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;padding:24px;background:#f4eddf;border-radius:14px;margin-top:24px}.story-followup .eyebrow{font-size:.7rem;color:#a1844a}.story-followup h4{font-size:1.03rem;line-height:1.85;color:#6b623e;margin:7px 0}.story-followup>div>p:last-child{font-size:.77rem;line-height:1.8;color:#8c8267;margin:0}.story-followup-answer{align-self:center;border:1px solid #e2d7bc;border-radius:10px;background:#fffaf0;font-size:.85rem;color:#73623e;overflow:hidden}.story-followup-answer summary{cursor:pointer;padding:16px;min-height:44px;font-weight:600}.story-followup-answer p{padding:0 16px 16px;font-size:.82rem;line-height:1.9;margin:0;color:#7d7050}.story-observation{margin:24px 0 16px;display:flex;align-items:baseline;gap:18px}.story-observation strong{font-size:.79rem;white-space:nowrap;color:#697c55}.story-observation p{font-size:.82rem;line-height:1.9;margin:0;color:#7a856a}
.story-zoom{width:min(780px,calc(100vw - 28px));max-height:calc(100dvh - 36px);padding:20px;border:0;border-radius:20px;background:#fffdf7;box-shadow:0 20px 100px #172f2855;overflow:auto}.story-zoom::backdrop{background:#172f28a6;backdrop-filter:blur(3px)}.story-zoom-top{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:14px}.story-zoom-top strong{font-size:.92rem;color:#45603f}.story-zoom-top button{font-size:.76rem;padding:10px 12px;background:#f1f2e7;border-color:#dce1cd;color:#5e7250}.story-zoom .story-image{border:1px solid #dce0d2;border-radius:14px;overflow:hidden}.story-zoom>p{font-size:.92rem;line-height:1.8;margin:14px 3px 0;color:#627153}.story-picture-button:focus-visible,.story-zoom-button:focus-visible{outline:3px solid #ca9c4d;outline-offset:-4px}
.home-story-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:18px 0}.home-story-panels>span{display:block;border:1px solid #fff9;border-radius:7px;overflow:hidden}.story-preview-card .preview-card-action{margin-top:15px}.story-preview-card h3{margin-top:17px}.story-preview-card .story-art{height:auto}
@media(max-width:1000px){.story-task-layout{grid-template-columns:minmax(0,1fr) 190px;gap:18px;padding:22px}.story-speaking-guide{padding:20px 16px}.story-board-heading{align-items:flex-start;flex-direction:column;gap:9px}.story-workbook-heading{padding:23px}.story-order-actions>span{flex-basis:100%;margin:0 0 4px}.story-order-actions .primary{margin-left:auto}.story-check{margin:0 22px 22px;gap:18px;align-items:flex-start;flex-direction:column}.story-model{gap:10px}.story-model li>p{font-size:.76rem;padding-left:11px;padding-right:11px}.story-followup{gap:18px}}
@media(max-width:760px){.four-panel-practice .scenario-tabs{display:flex;overflow-x:auto;gap:8px;padding:2px 0 10px;scrollbar-width:thin}.four-panel-practice .scenario-tabs button{flex:0 0 auto;min-width:125px;font-size:.73rem;flex-direction:row;align-items:center;gap:8px;padding:10px 12px}.story-task-layout{grid-template-columns:1fr;padding:20px;gap:20px}.story-speaking-guide{display:none}.story-workbook-heading{padding:22px 20px;align-items:flex-start;gap:13px}.story-workbook-heading h3{font-size:1.5rem}.story-workbook-heading p{font-size:.86rem;line-height:1.9}.story-page-number{font-size:1.7rem;margin-top:5px}.story-cast{gap:6px;margin-top:12px}.story-cast>strong{flex-basis:100%}.story-cast>span{padding-right:6px}.story-cast small{display:none}.story-board-heading{flex-direction:row;align-items:center;gap:12px}.story-board-heading>strong{font-size:.75rem;max-width:55%;line-height:1.8}.story-board-heading label{font-size:.68rem}.story-board{gap:10px}.story-frame{border-radius:11px}.story-order-box{top:7px;left:7px;width:31px;height:31px;font-size:.95rem;border-radius:8px}.story-frame figcaption{padding:3px 9px}.story-frame figcaption strong{font-size:.71rem}.story-zoom-button{font-size:.66rem;min-height:36px;padding-left:6px}.story-picture-hint{font-size:.69rem;padding:9px 11px}.story-order-tray{gap:7px;margin-top:17px}.story-order-tray li{padding:10px 3px}.story-order-tray span{font-size:.65rem}.story-order-tray strong{font-size:.77rem}.story-order-tray li:not(.is-filled) strong{font-size:.63rem}.story-order-actions>span{flex-basis:100%}.story-order-actions>button{font-size:.7rem;padding:9px 10px}.story-check{margin:0 20px 20px;padding:18px}.story-check strong{font-size:.86rem;line-height:1.8}.story-check .button{font-size:.76rem;width:100%;justify-content:center}.story-answer{padding:20px}.story-answer-heading h4{font-size:1.19rem;line-height:1.7}.story-model{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.story-model li>p{font-size:.77rem}.story-followup{grid-template-columns:1fr;padding:20px;gap:18px}.story-followup h4{font-size:1rem}.story-observation{flex-direction:column;gap:7px}.story-zoom{padding:14px;border-radius:15px}.story-zoom-top{align-items:flex-start;gap:9px}.story-zoom-top strong{font-size:.8rem;line-height:1.8}.story-zoom-top button{font-size:.67rem;white-space:nowrap;padding:9px}.story-zoom>p{font-size:.84rem}}
@media(max-width:480px){.four-panel-practice .scenario-heading{align-items:flex-start;gap:12px}.four-panel-practice .scenario-heading h2{font-size:1.5rem}.four-panel-practice .scenario-free{padding:10px 8px;white-space:nowrap;font-size:.78rem;margin-top:25px}.four-panel-practice .scenario-free strong{font-size:.62rem}.story-workbook{border-radius:17px}.story-task-layout{padding:15px}.story-workbook-heading{padding:18px 16px}.story-workbook-heading h3{font-size:1.35rem}.story-board{gap:8px}.story-order-actions{gap:6px}.story-order-actions .primary{flex-basis:100%;justify-content:center;margin-top:4px}.story-order-actions>span{flex-basis:auto;margin-right:auto;font-size:.68rem}.story-order-actions>button:not(.primary){padding:8px;font-size:.67rem}.story-check{margin:0 15px 18px}.story-category{font-size:.65rem}.story-answer{padding:18px 15px}.story-order-box{width:28px;height:28px;top:6px;left:6px}.story-preview-card h3,.story-preview-card p{max-width:100%}.story-preview-card{padding:20px}.home-story-panels{gap:7px}.story-board-heading>strong{max-width:50%}}
@media(prefers-reduced-motion:reduce){.story-frame{transition:none}}
@media print{.story-speaking-guide,.story-order-actions,.story-zoom-button,.scenario-tabs,.story-check,.scenario-bottom,.scenario-premium,.practice-upgrade,.story-board-heading label{display:none}.story-task-layout{display:block}.story-frame{break-inside:avoid}.story-answer{break-before:page}.story-board{grid-template-columns:1fr 1fr}.story-model{grid-template-columns:repeat(4,1fr)}}