.teacher-force{overflow:hidden}
.chroma-grid{--x:50%;--y:50%;--r:300px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);isolation:isolate}
.chroma-card{--mouse-x:50%;--mouse-y:50%;position:relative;z-index:1;min-width:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--card-border) 72%,transparent);border-radius:20px;background:var(--card-gradient);box-shadow:0 18px 45px rgba(44,35,24,.12);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.chroma-card::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(220px circle at var(--mouse-x) var(--mouse-y),rgba(255,246,225,.24),transparent 62%);opacity:.2;transition:opacity .25s ease}
.chroma-card:hover,.chroma-card:focus-within{transform:translateY(-5px);box-shadow:0 24px 58px rgba(44,35,24,.2)}
.chroma-card:hover::before{opacity:1}
.chroma-img{aspect-ratio:4/5;overflow:hidden;background:#b9ae9d}
.chroma-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 25%;filter:saturate(.84) contrast(.96);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.chroma-card:hover .chroma-img img{transform:scale(1.035);filter:saturate(.94) contrast(.98)}
.chroma-info{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 18px;color:#fff9ed;border-top:1px solid rgba(255,255,255,.14)}
.chroma-info p{display:grid;gap:4px;margin:0}.chroma-info strong{font:500 clamp(18px,1.8vw,24px)/1.15 "Noto Serif SC","Songti SC",serif;letter-spacing:.08em}.chroma-info span{font-size:12px;letter-spacing:.16em;color:rgba(255,249,237,.72)}
.chroma-info small{font:600 11px/1 Arial,sans-serif;letter-spacing:.14em;color:rgba(255,249,237,.55)}
.chroma-overlay,.chroma-fade{display:none;position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:22px}
.chroma-overlay{background:rgba(244,239,229,.86);mix-blend-mode:saturation;mask-image:radial-gradient(var(--r) circle at var(--x) var(--y),transparent 0%,transparent 16%,#000 78%);-webkit-mask-image:radial-gradient(var(--r) circle at var(--x) var(--y),transparent 0%,transparent 16%,#000 78%)}
.chroma-fade{z-index:4;background:rgba(244,239,229,.72);mask-image:radial-gradient(var(--r) circle at var(--x) var(--y),transparent 0%,transparent 18%,#000 82%);-webkit-mask-image:radial-gradient(var(--r) circle at var(--x) var(--y),transparent 0%,transparent 18%,#000 82%);opacity:1;transition:opacity .6s ease}
@media(max-width:820px){.chroma-grid{grid-template-columns:repeat(2,minmax(0,1fr));--r:230px}.chroma-info{padding:14px}.chroma-info strong{font-size:18px}}
@media(max-width:520px){.chroma-grid{grid-template-columns:1fr}.chroma-img{aspect-ratio:5/4}.chroma-info strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){.chroma-card,.chroma-img img,.chroma-fade{transition:none}.chroma-card:hover{transform:none}.chroma-overlay,.chroma-fade{display:none}}