.scholar-teaching{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:center;justify-content:center;padding:20px;background:#06162c70;box-sizing:border-box;font-family:system-ui,sans-serif;color:#143e4b}
.scholar-teaching-card{width:min(560px,100%);max-height:calc(100dvh - 40px);overflow:auto;background:linear-gradient(140deg,#f9ffff,#edf6f6);border:1px solid #bfe9e9;border-radius:26px;box-shadow:0 22px 90px #00152644,0 0 30px #79e1e833;padding:24px;box-sizing:border-box}
.scholar-teaching-top,.scholar-teaching-binding,.scholar-teaching-nav,.scholar-teaching-footer,.scholar-teaching-colors{display:flex;align-items:center;gap:12px;justify-content:space-between}
.scholar-teaching-top{font-size:13px;color:#437a86}.scholar-teaching h2{font-size:26px;margin:10px 0 12px}.scholar-teaching p{font-size:17px;line-height:1.7;margin:0 0 16px}
.scholar-teaching button{cursor:pointer;border:1px solid #b8d4df;border-radius:12px;padding:9px 16px;background:linear-gradient(#fff,#e6f3f6);color:#17465a;font:700 14px system-ui;box-shadow:0 3px 0 #bad3db,0 3px 12px #4fbdb817}
.scholar-teaching button:hover{border-color:#31bec7;box-shadow:0 3px 0 #81c9cf,0 0 15px #54cfd844}.scholar-teaching button:active{transform:translateY(2px)}.scholar-teaching button:disabled{opacity:.4;cursor:default}.scholar-teaching button:focus-visible,.scholar-teaching input:focus-visible{outline:3px solid #30abb9;outline-offset:3px}
.scholar-teaching .scholar-teaching-close{padding:4px 12px;font-size:22px}.scholar-teaching-binding{justify-content:flex-start;font-size:13px;flex-wrap:wrap;margin-bottom:16px}
.scholar-teaching kbd{display:inline-flex;align-items:center;justify-content:center;min-width:60px;height:38px;padding:0 10px;background:#fff;border:1px solid #a4c5d7;border-bottom:4px solid #9bbcca;border-radius:9px;font:bold 17px ui-monospace,monospace}
.scholar-teaching-demo{border:1px solid #b8d4db;border-radius:18px;padding:16px;margin-bottom:20px;background:#fdfefe;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden;min-height:135px}
.scholar-teaching-demo small{align-self:flex-start;color:#59818a;font-size:12px}.scholar-teaching-word{font-size:34px;font-weight:750;color:#0b926e;min-height:55px;display:flex;align-items:center;justify-content:center;max-width:100%;text-align:center;transition:font-size .3s,color .3s;line-height:1.2;overflow-wrap:anywhere}
.scholar-teaching-demo input{width:80%;accent-color:#159db2}.scholar-teaching-demo[data-effect=true] .scholar-teaching-word{animation:scholar-demo-change .5s ease}
.scholar-teaching-color-sample{padding:20px;background:#e0f3ef;border-radius:12px;width:90%;text-align:center;font-size:28px;font-weight:700;transition:background .5s,color .5s}
.scholar-teaching-nav button{flex:1}.scholar-teaching .scholar-teaching-primary{background:linear-gradient(130deg,#1bacca,#137d98);color:white;border-color:#138da4;box-shadow:0 3px 0 #12617c,0 0 14px #42cdd33b}
.scholar-teaching-footer{margin-top:16px;flex-wrap:wrap;gap:6px}.scholar-teaching-footer button{background:transparent;box-shadow:none;border:0;padding:5px;font-size:12px;color:#356674}
.scholar-teaching-target{outline:3px solid #19c3c6!important;outline-offset:4px!important;box-shadow:0 0 20px #41cbd977!important}
.scholar-teaching-compact{background:transparent;pointer-events:none;align-items:flex-end;justify-content:flex-start;padding:12px}.scholar-teaching-compact .scholar-teaching-card{width:min(340px,43vw);max-height:80dvh;pointer-events:auto;padding:16px}.scholar-teaching-compact .scholar-teaching-demo{display:none}.scholar-teaching-compact h2{font-size:20px}.scholar-teaching-compact p{font-size:14px}.scholar-teaching-compact .scholar-teaching-nav{gap:5px}.scholar-teaching-compact button{padding:7px 9px}
@keyframes scholar-demo-change{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:600px){.scholar-teaching{padding:10px}.scholar-teaching-card{padding:18px;max-height:calc(100dvh - 20px)}.scholar-teaching-compact .scholar-teaching-card{width:100%;max-height:42dvh}.scholar-teaching-compact{align-items:flex-end}.scholar-teaching p{font-size:15px}.scholar-teaching-demo{min-height:110px;padding:12px}}
@media(prefers-reduced-motion:reduce){.scholar-teaching *{transition:none!important;animation:none!important}}