.area-classroom{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center;margin:clamp(2rem,6vw,5rem) 0;padding:clamp(1.2rem,4vw,3.5rem);background:#eafaf3;border:1px solid #dcece5;border-radius:1.5rem;color:#173e34}
.area-classroom>*{min-width:0;overflow-wrap:anywhere}.area-classroom-kicker{display:block;color:#00875f;font-size:.85rem;font-weight:600}
.area-classroom h2{font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.65;letter-spacing:.02em;margin:.6rem 0 1rem;font-weight:650}.area-classroom p,.area-classroom li{font-size:clamp(.9rem,1.2vw,1rem);line-height:1.9}.area-classroom ul{padding:0;list-style:none;margin:1rem 0 1.5rem}.area-classroom li::before{content:'✓';color:#0e9066;margin-right:.55em;font-weight:700}.area-classroom .btn{min-height:44px;white-space:normal}
.area-classroom-preview{margin:0;min-width:0;background:white;box-shadow:0 16px 38px #173e3414;border:1px solid #c8ddd2;border-radius:.8rem;overflow:hidden}
.classroom-preview-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.7rem .8rem;border-bottom:1px solid #e1ebe5;font-size:clamp(.55rem,1vw,.75rem);font-weight:600}.classroom-preview-top i{display:inline-block;width:.45rem;height:.45rem;background:#0e9066;border-radius:50%;margin-right:.2rem}.classroom-preview-top>span:last-child{padding:.2rem .5rem;background:#eafaf3;border-radius:.5rem}
.classroom-preview-body{display:grid;grid-template-columns:minmax(0,1fr) 16%;gap:.6rem;padding:clamp(.5rem,1.4vw,1rem)}.classroom-preview-board{position:relative;min-width:0;border:1px solid #e2eae5;border-radius:.3rem;padding:.5rem;background:radial-gradient(#dce9e1 .8px,transparent .8px) 0 0/14px 14px}.classroom-preview-question{font-size:clamp(.55rem,1vw,.85rem);padding:.1rem .3rem;background:white}.classroom-preview-board>svg{display:block;width:100%;height:auto}.classroom-preview-board text{font:18px sans-serif;fill:#173e34}.classroom-preview-cursor{position:absolute;right:.4rem;top:42%;background:#0e9066;color:white;padding:.15rem .3rem;border-radius:.3rem;font-size:.6rem}.classroom-preview-participants{display:flex;flex-direction:column;gap:.6rem}.classroom-preview-participants>span{display:block;background:#eafaf3;border-radius:.4rem;overflow:hidden;text-align:center}.classroom-preview-participants svg{display:block;width:100%;height:auto;fill:#91c5b0;stroke:#00875f;stroke-width:1.5}.classroom-preview-participants small{display:block;font-size:.5rem;background:#00875f;color:white;padding:.2rem}
.classroom-preview-toolbar{display:flex;gap:.4rem;justify-content:center;align-items:center;padding:.4rem;border-top:1px solid #e1ebe5}.classroom-preview-toolbar>span{font-size:.85rem;line-height:1.3rem;text-align:center;width:1.3rem;color:#00875f;border:1px solid #c8ddd2;border-radius:.25rem}.classroom-preview-toolbar i{width:1rem;height:1rem;border-radius:50%;background:#f6f27a}.classroom-preview-toolbar i:nth-last-child(2){background:#b7f78b}.classroom-preview-toolbar i:last-child{background:#ff9fd3}.area-classroom-preview figcaption{text-align:center;font-size:.65rem;color:#52675d;padding:.4rem .8rem .65rem;line-height:1.5}