:root{font-family:Arial,sans-serif;color:#171717;background:#a0a0a0;font-size:16px}*{box-sizing:border-box}body{margin:0}.site{max-width:1320px;margin:0 auto;padding:24px 30px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 22px}.brand{font-family:'Good Times','Arial Black',Arial,sans-serif;font-size:clamp(26px,3.5vw,48px);font-weight:900;letter-spacing:-2px;text-decoration:none;color:#000}.brand span{color:#ffff00}.identity p{margin:5px 0 0;font-size:15px}.prototype{font-size:12px;border:1px solid #555;padding:6px 9px;color:#272727;white-space:nowrap}a,button{touch-action:manipulation}button,select{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #245ab5;outline-offset:3px}.topics{display:flex;background:#e2e2e2;border:1px solid #777;align-items:stretch}.topics strong,.topics a{padding:15px 20px;display:flex;align-items:center;text-decoration:none;border-right:1px solid #aaa;font-size:15px}.topics strong{background:#333;color:#fff;font-weight:normal}.topics a[aria-current]{background:#ffff73;box-shadow:inset 0 -3px #333}.topics a:hover{background:#ffffb5}.lessons{display:flex;gap:8px;padding:15px 0;flex-wrap:wrap}.lessons a{padding:8px 17px;background:linear-gradient(#f7f7f7,#d4d4d4);border:1px solid #777;text-decoration:none;font-size:15px;border-radius:3px}.lessons a[aria-current]{background:#fff;border:2px solid #333;padding:7px 16px;font-weight:bold}main{background:white;border:1px solid #545454;min-height:620px}.titlebar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#e7e7e7;padding:13px 22px;border-bottom:1px solid #999}h1{font-size:18px;font-weight:normal;margin:0}.plain{border:1px solid #999;background:#f7f7f7;padding:7px 11px;white-space:nowrap;font-size:14px}.toolbar{display:flex;align-items:center;gap:24px;padding:17px 22px;border-bottom:1px solid #ddd;flex-wrap:wrap}.switch{display:flex;gap:6px}.switch a{border:1px solid #888;background:#eee;padding:9px 16px;text-decoration:none;font-size:15px}.switch a[aria-current]{background:#ffff7a;border-color:#555}.toolbar span{font-size:15px;color:#444}#content{padding:18px 28px 12px}.sentences{margin:0;padding-left:36px;font-family:'Arial Narrow',Arial,sans-serif;font-size:clamp(21px,2.1vw,29px);line-height:1.55}.sentences li{padding:5px 0 5px 7px}.sentences li::marker{font-size:.8em;color:#555}.answer{color:#074e9e;text-decoration:underline;text-underline-offset:4px;background:none;border:0;font:inherit;padding:0;cursor:pointer}.answer:hover{background:#fffba6}.paging{padding:12px 28px 20px;display:flex;justify-content:space-between;gap:20px;align-items:center}.paging a{font-size:15px;text-decoration:none;padding:9px 13px;border:1px solid #aaa;background:#eee}.paging span{font-size:13px;color:#555}footer{display:flex;justify-content:space-between;gap:25px;font-size:12px;padding:18px 0;color:#202020}footer details{max-width:650px}footer summary{cursor:pointer}footer p{font-size:14px;line-height:1.6}.video{aspect-ratio:16/9;max-width:950px;margin:0 auto;background:#292929;color:white;display:grid;place-items:center;text-align:center}.video button{padding:16px 28px;background:#ffff73;border:1px solid black;font-size:20px}.video iframe{width:100%;height:100%;border:0}.video p{font-size:20px}.video-note{max-width:950px;margin:16px auto;font-size:14px;color:#444}.video-note a{margin-left:12px}dialog{padding:0;border:1px solid #444;max-width:1100px;width:calc(100% - 50px);max-height:92vh;background:white}dialog::backdrop{background:#0008}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 24px;background:#e7e7e7;border-bottom:1px solid #999}.dialog-head h2{font-size:20px;margin:0}dialog button{padding:10px 15px;background:#eee;border:1px solid #888}#example{font-family:'Arial Narrow',Arial,sans-serif;font-size:28px;padding:0 24px;line-height:1.4}.explanation-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:25px;padding:0 24px 25px;align-items:center}#diagram img{display:block;width:100%;height:auto}#explanation-text{font-family:'Arial Narrow',Arial,sans-serif;font-size:25px;line-height:1.45}#explanation-text p{margin:7px 0}.dialog-foot{padding:16px 24px;border-top:1px solid #ccc;display:flex;justify-content:space-between;gap:15px;align-items:center}.dialog-foot a{font-size:13px}.large .sentences{font-size:36px}.large #content{padding-top:22px}.large .sentences li{padding-top:10px;padding-bottom:10px}@media(min-width:1500px){.site{max-width:1450px}.sentences{font-size:30px}}@media(max-width:750px){.site{padding:15px 12px}header{gap:8px}.prototype{display:none}.brand{letter-spacing:-1px}.identity p{font-size:12px}.topics{flex-wrap:wrap}.topics strong{width:100%;padding:8px 12px}.topics a{width:50%;padding:12px;font-size:14px}.lessons{gap:6px}.lessons a{padding:9px 11px}.lessons a[aria-current]{padding:8px 10px}.titlebar{padding:12px;gap:8px}h1{font-size:16px}.plain{font-size:12px}.toolbar{padding:12px;gap:12px}.switch a{font-size:14px;padding:9px 10px}#content{padding:14px 12px}.sentences{padding-left:28px;font-size:22px}.sentences li{padding-bottom:12px}.paging{padding:12px;flex-wrap:wrap}footer{display:block}footer details{margin-top:12px}.explanation-grid{grid-template-columns:1fr;padding:0 14px 16px;gap:15px}.dialog-head{padding:12px}.dialog-head h2{font-size:17px}#example{font-size:23px;padding:0 14px}#explanation-text{font-size:22px}.dialog-foot{padding:12px;flex-wrap:wrap}dialog{width:calc(100% - 20px)}.large .sentences{font-size:29px}}
/* The player always occupies the complete reserved video surface. */
.video{position:relative;width:100%;overflow:hidden}
.video iframe{position:absolute;inset:0;display:block;width:100%;height:100%}
/* Fit the complete page, including header, navigation and footer. */
@media(min-width:751px){
 body{overflow:hidden}
 .site{position:absolute;top:0;left:50%;width:var(--page-width,1200px);max-width:none;height:auto;padding:14px 22px 10px;transform:translateX(-50%) scale(var(--page-scale,1));transform-origin:top center}
 header{padding-bottom:14px}.brand{font-size:40px}
 .topics strong,.topics a{padding:12px 16px}
 .lessons{padding:12px 0}
 main{min-height:0}
 .titlebar{padding:10px 18px}.toolbar{padding:12px 18px;gap:14px}
 #content,.large #content{padding:12px 22px;overflow:visible}
 .sentences{font-size:28px;line-height:1.4}
 .sentences li{padding:3px 0 3px 7px}
 .paging{padding:8px 22px 14px}
 footer{padding:12px 0 0}
 .video{width:100%;max-width:950px;aspect-ratio:16/9}
}
[hidden]{display:none!important}
.topic-label{align-self:center;padding:0 14px;font-size:14px}
#topic{flex:1;min-width:0;align-self:center;margin:7px 10px 7px 0;padding:9px 12px;background:#ffffa0;border:1px solid #888;color:#171717;font-size:16px}
.topics .schema-shortcut{border-left:1px solid #aaa;border-right:0}
.lessons{align-items:center}.exercise-label{font-size:16px;padding-left:6px}
#exercise{padding:8px 14px;border:1px solid #777;background:#fff;font-size:16px;min-width:90px}
.lesson-range{color:#444;font-size:14px;margin-left:8px}
.full-schema{display:block;width:min(100%,788px);height:auto;aspect-ratio:4/3;margin:0 auto}
@media(max-width:750px){.topic-label{padding:0 10px}#topic{font-size:14px;margin:8px 8px 8px 0;max-width:calc(100% - 100px)}.topics .schema-shortcut{width:100%;padding:8px 12px;border-top:1px solid #aaa}.lesson-range{font-size:13px;margin-left:0}}
.subjects{display:flex;gap:0;border:1px solid #777;border-bottom:0;background:#ddd}
.subjects a{padding:10px 20px;text-decoration:none;border-right:1px solid #999;font-size:16px}
.subjects a[aria-current]{background:#ffff73;font-weight:bold}
.word-row{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:start;gap:16px}
.word-table{max-width:1080px;margin:auto}.word-arrow{color:#777}.solution{color:#074e9e;font-weight:600}
.reading-passage{font-family:'Arial Narrow',Arial,sans-serif;font-size:24px;line-height:1.45}.reading-passage p{margin:0 0 14px}.large .reading-passage{font-size:28px}
@media(max-width:750px){.subjects a{flex:1;padding:11px 12px;font-size:14px}.word-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:7px;font-size:18px}.reading-passage{font-size:20px}}
.subjects{flex-wrap:wrap}.subjects a{padding:9px 11px;font-size:14px}
.library-controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}.library-controls a{padding:10px 16px;border:1px solid #888;background:#eee;text-decoration:none;font-size:15px}.library-controls a[aria-current]{background:#ffff7a}
.source-instruction{font-size:18px;margin:5px 0 16px}.source-text{font-family:'Arial Narrow',Arial,sans-serif;font-size:28px;line-height:1.45}.source-text p{margin:0 0 10px}.source-text a[data-page]{color:#074e9e;text-underline-offset:4px}.large .source-text{font-size:34px}
.scan-window{position:relative;overflow:hidden;width:min(100%,920px);margin:auto;background:white}.scan-window img{position:absolute;left:0;display:block}
.documents{display:grid;grid-template-columns:1fr 1fr;gap:12px}.documents a{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:18px;border:1px solid #999;background:#f8f8f8;font-size:20px;text-decoration:none}.documents a:hover{background:#ffffc4}.documents span{font-size:14px;color:#074e9e}
.library-explanation{display:block}.library-explanation #diagram:empty{display:none}
@media(max-width:750px){.subjects a{flex:0 1 auto;font-size:13px;padding:10px}.source-text{font-size:22px}.documents{grid-template-columns:1fr}.documents a{font-size:18px}}
.resource-links{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.resource-links a{font-size:14px;padding:7px 10px;border:1px solid #aaa;background:#ffffd2;text-decoration:none}.screen-label{font-size:14px;display:flex;align-items:center;gap:7px}.screen-label select{max-width:230px;padding:7px;border:1px solid #888;background:#fff}.paging{flex-wrap:wrap}
.video-documents{max-width:950px;margin:14px auto 4px;padding:0;list-style:none;font-size:18px;line-height:1.45}.video-documents li{margin:7px 0}.video-documents a{color:#074e9e}.paging a{max-width:48%}

.scroll-lesson{height:550px;overflow-y:scroll;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 12px 8px 0}.scroll-lesson:focus-visible{outline:3px solid #245ab5;outline-offset:3px}.scroll-lesson .scan-window{width:100%;max-width:920px}.scroll-lesson .source-text{margin-bottom:14px}@media(max-width:750px){.scroll-lesson{height:65vh;padding-right:6px}}
/* The motion belongs only to the welcome screen. Each button has its own safe travel area. */
.welcome-stage{background:#f0f0f0;overflow:hidden;border:1px solid #e2e2e2;padding:15px 25px 25px;isolation:isolate}
.welcome-logo-area{height:220px;display:grid;place-items:center;perspective:1100px}
.welcome-logo{position:relative;width:100%;height:80px;transform-style:preserve-3d;animation:welcome-turn 26s linear infinite}
.welcome-logo-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-family:'Arial Black',Arial,sans-serif;font-size:clamp(32px,5.3vw,70px);font-weight:900;letter-spacing:-3px;color:#414141;transform:translateZ(calc(var(--depth)*2px));backface-visibility:visible}
.welcome-logo-layer .welcome-yellow{color:#a99c00}.welcome-logo-front{color:#101010;text-shadow:0 2px 1px #0002}.welcome-logo-front .welcome-yellow{color:#ffe900;text-shadow:0 1px 0 #b7a600}
.welcome-invitation{text-align:center;margin:0 0 15px;font-size:17px;color:#555;letter-spacing:.2px}
.welcome-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px 12px;max-width:1060px;margin:auto}
.welcome-lane{height:87px;display:flex;align-items:center;justify-content:center;min-width:0}
.welcome-subject{width:84%;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:46px;padding:12px 16px;background:linear-gradient(#fff,#ededed);border:1px solid #8d8d8d;border-bottom:3px solid #666;border-radius:5px;box-shadow:0 6px 12px #00000012;text-decoration:none;font-size:16px;animation:welcome-bounce var(--duration) linear var(--delay) infinite alternate;will-change:transform}
.welcome-subject:hover,.welcome-subject:focus-visible{background:#ffff8a;border-color:#282828;box-shadow:0 7px 16px #0002}.welcome-subject>span:last-child{color:#888}
.welcome-stage:has(.welcome-subject:hover) .welcome-subject,.welcome-stage:focus-within .welcome-subject,.welcome-stage.is-paused *{animation-play-state:paused!important}
@keyframes welcome-turn{0%{transform:rotateX(-9deg) rotateY(0deg)}50%{transform:rotateX(9deg) rotateY(180deg)}100%{transform:rotateX(-9deg) rotateY(360deg)}}
@keyframes welcome-bounce{0%{transform:translate(-5%,-12px) rotate(-1deg)}28%{transform:translate(5%,10px) rotate(1deg)}54%{transform:translate(-3%,15px) rotate(-.5deg)}77%{transform:translate(6%,-10px) rotate(1deg)}100%{transform:translate(-5%,-14px) rotate(-1deg)}}
.welcome-page #content{padding:0}.welcome-page .titlebar{border-bottom:0}.welcome-page .paging{padding-top:12px}.welcome-hint{font-size:13px}
@media(max-width:750px){.welcome-stage{padding:10px 10px 20px}.welcome-logo-area{height:155px;perspective:650px}.welcome-logo-layer{font-size:clamp(23px,7vw,48px);letter-spacing:-1.6px}.welcome-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.welcome-lane{height:78px}.welcome-subject{font-size:13px;width:87%;padding:10px 9px;min-height:44px}.welcome-invitation{font-size:14px}.welcome-page .paging{gap:10px}}
@media(prefers-reduced-motion:reduce){.welcome-stage *{animation:none!important}.welcome-logo{transform:rotateX(-9deg) rotateY(-12deg)}.welcome-subject{will-change:auto}}
.teaching-answer{display:inline;padding:0;border:0;background:transparent;text-align:left;font:inherit;line-height:inherit;color:inherit;cursor:pointer}.teaching-answer:hover{background:#fff9bc}.teaching-answer:focus-visible{outline:3px solid #245ab5;outline-offset:3px}.word-row .teaching-answer{text-decoration:underline;text-underline-offset:4px}.teaching-body{padding:18px 26px;font-size:23px;line-height:1.5}#teaching-example{font-size:26px;border-bottom:1px solid #ddd;margin:0 0 18px;padding-bottom:16px}#teaching-text p{margin:0 0 15px}.teaching-reference{font-size:14px;color:#555}.explanation-hint{font-size:15px;color:#555;margin:0 0 12px}#teaching-explanation .dialog-foot span{font-size:13px;color:#666}@media(max-width:750px){.teaching-body{padding:16px;font-size:19px}#teaching-example{font-size:22px}}
.grammar-solution>.teaching-answer{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

.debate-page{max-width:1050px;margin:35px auto;text-align:center}.debate-banner{display:flex;align-items:center;gap:45px;padding:45px 30px;color:#263677;background:white;text-decoration:none;text-align:left}.debate-banner img{width:190px;max-width:30%;height:auto}.debate-banner strong{font-size:45px;line-height:1.15;font-weight:400}.debate-link{display:inline-block;margin-top:30px;font-size:26px;color:#074e9e}.debate-page>p{font-size:16px}.debate-banner:hover{outline:3px solid #263677}.debate-banner:focus-visible,.debate-link:focus-visible{outline:3px solid #245ab5;outline-offset:4px}@media(max-width:750px){.debate-banner{gap:20px;padding:25px 15px}.debate-banner strong{font-size:28px}.debate-link{font-size:22px}}

/* Keep each argument visually connected to its own explanation. */
.argument-answer{display:block;padding-bottom:1.2em}.argument-statement{display:block;margin-bottom:.22em}.argument-explanation{display:block}