.sc-showcase{--showcase-paper:#f7f6f3;--showcase-accent:#6150a0}
.sc-showcase main{overflow:clip}
.showcase-hero{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:65px;padding-block:48px 65px}
.showcase-crumb{display:flex;flex-wrap:wrap;gap:9px;color:var(--muted);font-size:10px;margin-bottom:30px}.showcase-crumb a:hover{color:var(--teal)}
.showcase-heading h1{font-size:clamp(32px,3.3vw,48px);font-weight:450;letter-spacing:-.045em;line-height:1.35;margin:14px 0 16px;text-wrap:balance}
.showcase-line{font-size:20px;line-height:1.6;letter-spacing:-.02em;max-width:420px;margin:0 0 18px;text-wrap:balance}
.showcase-summary{font-size:13px;color:var(--muted);line-height:2;max-width:470px;margin:0 0 26px}
.showcase-actions{display:flex;align-items:center;gap:28px}.showcase-actions .text-link{font-size:12px;border-color:#d2cbdc}
.showcase-cover{min-width:0;margin:0;padding:18px 18px 13px;background:var(--showcase-paper);border:1px solid #e7e4e9;border-radius:5px;transform:rotate(1deg)}
.cover-caption{display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:.09em;color:var(--muted);margin-bottom:13px}
.showcase-cover img{width:100%;height:auto;border:1px solid #dfdce5;border-radius:2px;box-shadow:0 6px 20px #25294b0c}.showcase-cover figcaption{font-size:10px;color:var(--muted);margin-top:12px}
.showcase-overview{display:grid;grid-template-columns:.75fr 1.25fr;gap:75px;padding-block:40px;border-block:1px solid var(--line)}
.showcase-overview h2{font-size:20px;font-weight:500;letter-spacing:-.03em;margin:10px 0 12px}.showcase-for p{font-size:13px;color:var(--muted);max-width:330px;margin:0;line-height:1.9}
.showcase-goals ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}.showcase-goals li{font-size:13px;color:var(--muted);display:flex;align-items:baseline;gap:13px}.showcase-goals li::before{content:'↗';color:var(--showcase-accent);font-size:14px}
.showcase-classroom{padding-block:65px}.showcase-classroom .section-head h2{font-size:30px}.showcase-classroom .section-head>p{font-size:11px;max-width:300px}
.showcase-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 34px}
.showcase-scene{min-width:0}.scene-image{display:block;border:1px solid #dedbe5;border-radius:5px;overflow:hidden;background:#eeecef;transition:border-color .2s,box-shadow .2s}
.scene-image:hover{border-color:#9988b9;box-shadow:0 8px 26px #25294b0d}.scene-image img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;background:#fff}
.scene-chrome{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#f4f2f6;padding:10px 13px;border-bottom:1px solid #e1dde7;font-size:8px;color:#686677;letter-spacing:.09em}.chrome-dots{display:flex;gap:5px}.chrome-dots i{width:5px;height:5px;border:1px solid #bcb4c8;border-radius:50%;background:#e8e3ed}.scene-chrome>span:last-child{letter-spacing:0;color:#6150a0}
.scene-caption{display:grid;grid-template-columns:32px 1fr;gap:13px;margin-top:21px}.scene-number{font:italic 24px/1.4 Georgia,serif;color:#9080aa}.scene-caption h3{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-.02em;margin:0 0 10px}.scene-caption p{font-size:12px;color:var(--muted);line-height:1.95;margin:0;max-width:470px}
.showcase-note{font-size:10px;line-height:1.9;color:var(--muted);max-width:950px;border-top:1px solid var(--line);padding-top:20px;margin:35px 0 0}
.showcase-next{display:flex;align-items:center;justify-content:space-between;gap:40px;background:var(--showcase-paper);padding:40px;margin-bottom:65px}.showcase-next h2{font-size:26px;font-weight:400;letter-spacing:-.03em;margin:12px 0}.showcase-next p{font-size:12px;color:var(--muted);margin:0}.showcase-next>div:last-child{display:grid;gap:13px;justify-items:start;flex-shrink:0}.showcase-next .text-link{font-size:12px}
.showcase-related{padding-bottom:65px}.showcase-related .section-head{margin-bottom:20px}.showcase-related h2{font-size:25px}.showcase-related .section-head>.text-link{font-size:12px}.showcase-related>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.showcase-related>div:last-child>a{display:flex;justify-content:space-between;gap:20px;font-size:14px;padding:20px 0;border-block:1px solid var(--line)}.showcase-related>div:last-child>a>span:last-child{color:var(--showcase-accent)}
.screenshot-dialog{width:min(1400px,96vw);max-width:96vw;max-height:95dvh;margin:auto;padding:0;background:#fff;border:1px solid #dcd6e5;border-radius:7px;color:var(--ink);box-shadow:0 30px 100px #18122b4d;overflow:hidden}.screenshot-dialog:not([open]){display:none}.screenshot-dialog[open]{display:flex;flex-direction:column}.screenshot-dialog::backdrop{background:#151329c9;backdrop-filter:blur(5px)}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 17px;background:#f7f5f9;border-bottom:1px solid var(--line);flex-shrink:0}.viewer-toolbar>p{font-size:11px;letter-spacing:.15em;margin:0;color:var(--muted)}.viewer-toolbar>div{display:flex;gap:8px}.viewer-toolbar button{font-size:11px;min-height:34px;min-width:35px;border:1px solid #d6d0e1;background:#fff;padding:5px 12px;border-radius:3px}.viewer-toolbar button:hover,.viewer-toolbar button[aria-pressed=true]{background:#ede7f4;border-color:#9e8db9}
.viewer-image{overflow:auto;min-height:0;flex:1;background:#eeecef;overscroll-behavior:contain}.viewer-image img{width:100%;height:auto;max-width:100%;display:block;margin:auto}.viewer-image.is-actual-size img{width:1440px;max-width:none}.viewer-caption{padding:17px 22px;flex-shrink:0;border-top:1px solid var(--line)}.viewer-caption h2{font-size:17px;font-weight:500;line-height:1.5;margin:0 0 6px}.viewer-caption p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
@media(max-width:1000px){.showcase-hero{gap:35px}.showcase-line{font-size:18px}.showcase-heading h1{font-size:37px}.showcase-overview{gap:40px}.showcase-gallery{gap:36px 25px}.scene-caption{grid-template-columns:26px 1fr;gap:10px}.scene-caption h3{font-size:17px}.showcase-next{padding:30px}.showcase-next h2{font-size:23px}.showcase-related>div:last-child{gap:20px}}
@media(max-width:700px){.showcase-hero{grid-template-columns:1fr;gap:30px;padding-block:28px 40px}.showcase-crumb{font-size:9px;margin-bottom:24px;gap:8px}.showcase-heading h1{font-size:34px;margin:12px 0 14px}.showcase-heading .eyebrow{font-size:9px}.showcase-line{font-size:18px;margin-bottom:15px}.showcase-summary{font-size:12px;margin-bottom:21px}.showcase-cover{padding:13px 13px 10px;transform:none}.cover-caption{font-size:8px;margin-bottom:10px}.showcase-cover figcaption{font-size:9px}.showcase-overview{grid-template-columns:1fr;gap:28px;padding-block:30px}.showcase-overview h2{font-size:19px;margin-top:8px}.showcase-for p,.showcase-goals li{font-size:12px}.showcase-classroom{padding-block:40px}.showcase-classroom .section-head{flex-direction:column;gap:12px}.showcase-classroom .section-head h2{font-size:26px}.showcase-classroom .section-head>p{max-width:none;padding:0;font-size:11px}.showcase-classroom .section-head>p br{display:none}.showcase-gallery{grid-template-columns:1fr;gap:32px}.scene-caption{margin-top:17px;grid-template-columns:27px 1fr;gap:11px}.scene-caption h3{font-size:18px;margin-bottom:8px}.scene-caption p{font-size:12px}.scene-number{font-size:23px}.scene-chrome{padding:8px 11px;font-size:8px}.showcase-note{font-size:9px;margin-top:27px}.showcase-next{display:block;padding:26px;margin-bottom:40px}.showcase-next h2{font-size:23px;line-height:1.6}.showcase-next p{font-size:11px}.showcase-next>div:last-child{margin-top:23px}.showcase-related{padding-bottom:40px}.showcase-related h2{font-size:23px}.showcase-related .section-head{gap:12px}.showcase-related>div:last-child{grid-template-columns:1fr;gap:0}.showcase-related>div:last-child>a{font-size:13px;padding:17px 0;border-bottom:0}.showcase-related>div:last-child>a:last-child{border-bottom:1px solid var(--line)}.screenshot-dialog{width:96vw;max-height:95dvh}.viewer-toolbar{padding:9px 10px;gap:8px}.viewer-toolbar>p{font-size:10px;letter-spacing:.05em}.viewer-toolbar>div{gap:5px}.viewer-toolbar button{padding:5px 8px;font-size:10px;min-width:30px;min-height:36px}.viewer-caption{padding:14px}.viewer-caption h2{font-size:15px}.viewer-caption p{font-size:11px}.viewer-image{min-height:100px}}
@media(prefers-reduced-motion:reduce){.scene-image{transition:none}}

/* Classroom editorial: larger working examples, with the method next to them. */
.sc-showcase{--showcase-accent:#4d4d79;--showcase-paper:#f4f3ef}
.sc-showcase[data-stage="primary"]{--showcase-accent:#945b35;--showcase-paper:#faf3e9}
.sc-showcase[data-course="national-geographic"],.sc-showcase[data-course="think"]{--showcase-accent:#326250;--showcase-paper:#f0f4ee}
.sc-showcase[data-course="grammar"]{--showcase-accent:#3c4c74;--showcase-paper:#f3f0e8}
.sc-showcase[data-stage="senior"]{--showcase-accent:#355c70;--showcase-paper:#eff4f5}
.sc-showcase[data-stage="overseas"]{--showcase-accent:#78504b;--showcase-paper:#f8f2ee}
.showcase-hero{grid-template-columns:.85fr 1.15fr;gap:48px;padding-block:45px 64px}
.showcase-heading h1{font-size:clamp(34px,3.5vw,50px);font-weight:500}
.showcase-line{font-size:22px;line-height:1.65;max-width:470px}
.showcase-summary{font-size:14px;line-height:1.95}
.showcase-cover{padding:15px 15px 0;border:0;transform:none;border-radius:0;background:var(--showcase-paper)}
.showcase-cover img{border:0;border-radius:0;box-shadow:0 8px 22px #25294b0c}
.cover-caption{font-size:10px;color:var(--showcase-accent);letter-spacing:.09em}
.showcase-cover figcaption{display:flex;justify-content:space-between;gap:16px;padding:15px 2px 18px;margin:0;font-size:11px}
.showcase-cover figcaption>span:first-child{color:var(--showcase-accent);font-weight:600}
.showcase-for p,.showcase-goals li{font-size:14px}
.method-path{padding-block:46px 44px;border-bottom:1px solid var(--line)}
.method-path-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:30px}
.method-path h2{font-size:25px;font-weight:500;letter-spacing:-.03em;margin:0}
.method-path ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:0}
.method-path li{display:grid;grid-template-columns:37px 1fr;gap:13px;align-items:start}
.method-step{font:italic 29px/1.1 Georgia,serif;color:var(--showcase-accent);padding-top:3px}
.method-path h3{font-size:16px;font-weight:600;margin:0 0 10px;line-height:1.6}
.method-path p{font-size:13px;color:var(--muted);line-height:1.9;margin:0}
.showcase-classroom{padding-block:68px}
.showcase-classroom .section-head{align-items:flex-end;margin-bottom:36px}
.showcase-classroom .section-head h2{font-size:34px;font-weight:500}
.showcase-classroom .section-head>p{font-size:12px;line-height:1.9}
.showcase-gallery{gap:55px 34px}
.scene-image{border:0;border-radius:0;background:var(--showcase-paper);box-shadow:0 0 0 1px #25294b12;transition:box-shadow .2s}
.scene-image:hover{box-shadow:0 0 0 2px var(--showcase-accent),0 8px 28px #25294b10}
.scene-chrome{padding:10px 13px;background:var(--showcase-paper);border:0;font-size:9px;letter-spacing:.1em}
.scene-chrome>span:last-child{color:var(--showcase-accent)}
.scene-image img{display:block}
.scene-caption{grid-template-columns:32px 1fr;gap:14px;margin-top:25px}
.scene-number{color:var(--showcase-accent);font-size:25px}
.scene-method{display:block;font-size:11px;font-weight:600;color:var(--showcase-accent);letter-spacing:.06em;margin-bottom:10px}
.scene-caption h3{font-size:21px;font-weight:500;line-height:1.55;margin-bottom:14px;text-wrap:balance}
.scene-caption p{font-size:14px;line-height:1.95;max-width:500px}
.scene-lesson-link{display:inline-block;margin-top:17px;font-size:11px;color:var(--showcase-accent);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.showcase-scene.is-featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.75fr);align-items:center;gap:44px;padding:30px;background:var(--showcase-paper)}
.is-featured .scene-caption{display:block;margin:0;padding:14px 8px}
.is-featured .scene-number{display:block;font-size:43px;margin-bottom:22px}
.is-featured .scene-caption h3{font-size:clamp(22px,2.1vw,28px)}
.is-featured .scene-method{font-size:11px;margin-bottom:13px}
.is-featured .scene-caption p{font-size:14px;line-height:2}
.is-featured .scene-image{align-self:center;background:#fff}
.is-featured .scene-chrome{background:#fff}
.is-featured.is-reversed{grid-template-columns:minmax(0,.75fr) minmax(0,1.65fr)}
.is-reversed .scene-image{grid-column:2;grid-row:1}.is-reversed .scene-caption{grid-column:1;grid-row:1}
.showcase-note{font-size:11px;margin-top:42px}
.viewer-caption p{font-size:14px}
@media(max-width:1000px){
 .showcase-hero{gap:32px}.showcase-line{font-size:20px}.showcase-summary{font-size:13px}
 .method-path ol{gap:24px}.method-path li{grid-template-columns:29px 1fr;gap:10px}.method-path p{font-size:12px}
 .showcase-scene.is-featured{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);gap:25px;padding:23px}
 .showcase-scene.is-reversed{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr)}
 .is-featured .scene-number{font-size:34px;margin-bottom:13px}.is-featured .scene-caption{padding:0}
 .is-featured .scene-caption h3{font-size:22px}.is-featured .scene-caption p{font-size:13px;line-height:1.9}
}
@media(max-width:700px){
 .showcase-hero{grid-template-columns:1fr;padding-block:28px 40px;gap:28px}
 .showcase-heading h1{font-size:35px}.showcase-line{font-size:20px}.showcase-summary{font-size:13px}
 .showcase-cover{padding:10px 10px 0}.cover-caption{font-size:8px}.showcase-cover figcaption{padding:12px 0;font-size:9px;gap:8px}
 .showcase-for p,.showcase-goals li{font-size:13px}
 .method-path{padding-block:32px}.method-path-head{display:block;margin-bottom:25px}.method-path h2{font-size:24px;margin-top:12px}
 .method-path ol{grid-template-columns:1fr;gap:24px}.method-path li{grid-template-columns:34px 1fr;gap:12px}
 .method-path h3{font-size:16px;margin-bottom:6px}.method-path p{font-size:13px}.method-step{font-size:28px}
 .showcase-classroom{padding-block:42px}.showcase-classroom .section-head{align-items:flex-start;margin-bottom:26px}
 .showcase-classroom .section-head h2{font-size:28px}.showcase-classroom .section-head>p{font-size:11px}
 .showcase-gallery{gap:34px}.scene-caption{margin-top:20px;grid-template-columns:27px 1fr;gap:12px}
 .scene-caption h3{font-size:21px;margin-bottom:10px}.scene-caption p{font-size:13px}.scene-method{font-size:10px;margin-bottom:8px}
 .scene-lesson-link{font-size:11px;margin-top:13px}.scene-chrome{font-size:8px;padding:8px 10px}
 .showcase-scene.is-featured,.showcase-scene.is-reversed{display:block;padding:15px;background:var(--showcase-paper)}
 .is-featured .scene-caption{padding:22px 5px 10px;display:grid;grid-template-columns:27px 1fr;gap:12px}
 .is-featured .scene-number{font-size:25px;margin:0}.is-featured .scene-caption h3{font-size:21px}
 .is-featured .scene-method{font-size:10px;margin-bottom:8px}.is-featured .scene-caption p{font-size:13px;line-height:1.95}
 .showcase-note{font-size:10px;margin-top:30px}.viewer-caption p{font-size:12px}
}
