.teaching-page{--green:var(--site-color-e5d8bcff3e, #0a3515);--gold:var(--site-color-409347bfd6, #f2af06);--rule:var(--site-color-020a80a87b, #b18a48);background:var(--site-color-74a7bc729b, #faf4e9);color:var(--green);padding:clamp(20px,2.4vw,40px) clamp(16px,2.3vw,40px) 32px}
.teaching-head,.teaching-content{display:grid;grid-template-columns:minmax(0,18.25%) minmax(0,1fr);gap:clamp(18px,1.9vw,34px)}
.teaching-head{margin-bottom:34px}
.teaching-profile{border-right:1px solid var(--rule);display:flex;flex-direction:column;align-items:flex-start;padding-inline:clamp(0px,2.5vw,42px) 6px;text-decoration:none;font:700 clamp(15px,1.47vw,26px)/1.1 "KCSoni Digits",Georgia,serif;white-space:nowrap;color:inherit}
.teaching-profile img{width:clamp(110px,10.7vw,180px);max-width:100%;aspect-ratio: .96;object-fit:cover;object-position:center 30%;border-radius:16px;margin-bottom:10px}
.teaching-profile strong::after,.teaching-intro h1::after{content:"";display:block;width:54px;height:5px;background:var(--gold);margin-top:8px}
.teaching-intro{padding-inline:clamp(0px,1vw,18px)}
.teaching-intro h1{font:700 clamp(34px,3.75vw,64px)/1 "KCSoni Digits",Georgia,serif;margin:0;color:inherit}
.teaching-intro h1::after{width:64px}
.teaching-intro p{font-size:clamp(16px,1.45vw,24px);line-height:1.22;color:var(--site-color-da04a768ea, #101620);margin:8px 0 clamp(20px,2vw,34px)}
.teaching-tools,.teaching-levels,.teaching-search{display:flex;align-items:center;gap:clamp(10px,1.3vw,24px)}
.teaching-search{flex:1;min-width:0;border:1px solid var(--site-color-b0ab8640b0, #927019);border-radius:22px;padding:8px 14px;background:var(--site-color-5fb8c7ebef, #fff6)}
.teaching-search svg{width:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.teaching-search input{width:100%;min-width:0;border:0;padding:0;background:transparent;font:inherit;font-size:clamp(15px,1.3vw,21px);color:var(--site-color-ef348f5f21, #15191d)}
.teaching-levels{border-left:1px solid var(--rule);padding-left:clamp(10px,2vw,34px)}
.teaching-page button{cursor:pointer}
.teaching-levels button{min-width:clamp(64px,7.3vw,124px);border:1px solid var(--green);border-radius:999px;background:transparent;color:inherit;font:700 clamp(17px,1.5vw,25px)/1 "KCSoni Digits",Georgia,serif;padding:10px}
.teaching-levels button.active,.teaching-topics h2{background:var(--green);color:white}
.teaching-topics{align-self:start;border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.teaching-topics h2{font:700 clamp(23px,2vw,34px)/1 "KCSoni Digits",Georgia,serif;margin:0;padding:12px 7%}
.teaching-topics h2::after{content:none}
.teaching-topics button{display:flex;align-items:center;justify-content:space-between;gap:6px;width:92%;text-align:left;margin:auto;padding:clamp(9px,.9vw,15px) 3%;border:0;border-radius:0;border-bottom:1px solid var(--site-color-2b76971068, #d7c39c);background:transparent;color:var(--site-color-da04a768ea, #101620);font:700 clamp(11px,1.1vw,19px)/1.2 "KCSoni Digits",Georgia,serif;white-space:nowrap}
.teaching-topics button::after{content:"";flex:none;width:7px;height:7px;border-top:2px solid var(--site-color-8e63f30330, #99730b);border-right:2px solid var(--site-color-8e63f30330, #99730b);transform:rotate(45deg);margin-right:3px}
.teaching-topics button:hover{transform:none;box-shadow:none}
.teaching-topics button:last-child{border-bottom:0}
.teaching-topics button:hover,.teaching-topics button.active{background:var(--site-color-2a6bb12684, #f8e8bc)}
.teaching-topics .teaching-reset.active{display:none}
.teaching-tiles{display:grid;align-content:start;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,22px)}
.teaching-tile{position:relative;min-width:0;aspect-ratio:1.94;border-radius:15px;overflow:hidden;background:var(--green)}
.teaching-tile>img,.teaching-tile>div,.teaching-tile .video{width:100%;height:100%;object-fit:cover;display:block}
.teaching-tile .video img{object-fit:cover}
.teaching-reference .play{opacity:0}
.teaching-reference .play:focus-visible{opacity:1}
.teaching-caption{position:absolute;top:0;left:0;right:0;pointer-events:none;margin:0;padding:10px 16px 22px;color:white;background:linear-gradient(var(--site-color-e410deb97a, #000b),transparent);font:700 clamp(20px,2vw,34px)/1 "KCSoni Digits",Georgia,serif}
.teaching-watch{position:absolute;inset:0;display:grid;place-items:center;color:white;text-decoration:none;font-size:26px}
.teaching-tile:has(.teaching-sr:is(h2)) .teaching-watch{color:transparent}
.teaching-watch:focus-visible{outline:3px solid var(--gold);outline-offset:-4px;color:white}
.teaching-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.teaching-empty{grid-column:1/-1;display:none}
.teaching-tiles:not(:has(.teaching-tile:not([hidden]))) .teaching-empty{display:block}
@media(max-width:950px){.teaching-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.teaching-head,.teaching-content{grid-template-columns:minmax(140px,23%) minmax(0,1fr)}.teaching-tools{flex-wrap:wrap}.teaching-search{flex-basis:100%}.teaching-levels{padding:0;border:0}}
@media(max-width:700px){
    .teaching-page{padding:18px 12px 24px}
    .teaching-head,.teaching-content{grid-template-columns:1fr;gap:16px}
    .teaching-head{margin-bottom:16px}
    .teaching-profile{flex-direction:row;align-items:center;gap:12px;border:0;padding:0;font-size:18px}
    .teaching-profile img{width:58px;margin:0;border-radius:10px}
    .teaching-intro{padding:0}
    .teaching-intro h1{font-size:clamp(28px,8vw,40px)}
    .teaching-intro p{font-size:15px;margin-bottom:14px}
    .teaching-search{padding:8px 10px;gap:8px}
    .teaching-search svg{width:19px}
    .teaching-search input{font-size:14px}
    .teaching-levels{gap:8px}
    .teaching-levels button{font-size:16px;padding:8px}
    .teaching-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));container-type:inline-size}
    .teaching-topics h2,.teaching-topics .teaching-reset{grid-column:1/-1}
    .teaching-topics h2{font-size:21px;padding:10px 12px}
    .teaching-topics button{width:100%;min-height:38px;padding:8px 6px;font-size:clamp(10px,3.8cqi,16px)}
    .teaching-topics button::after{display:none}
    .teaching-topics button:nth-of-type(odd){border-right:1px solid var(--site-color-2b76971068, #d7c39c)}
    .teaching-topics .teaching-reset{justify-content:center;border-right:0}
    .teaching-tiles{grid-template-columns:1fr}
}
@media(max-width:320px){
    .teaching-topics button{font-size:11px}
}