@font-face{font-family:SelEntryHuninn;src:url('/learning-guides/assets/sel-entry-huninn-v1.woff2') format('woff2');font-display:swap}
.guide-sel-card.guide-sel-card--emotions{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,1fr);gap:36px;min-height:310px;padding:32px 38px;border:1px solid #ffffff30;border-radius:22px;background:#18232f;color:#f4f2e9;font-family:SelEntryHuninn,'PingFang TC',sans-serif;box-shadow:0 15px 40px #0b172b18;transition:border-color .2s ease,box-shadow .2s ease}
.guide-sel-card--emotions::before{content:'';position:absolute;inset:-45%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 15% 30%,#4fb1a133,transparent 42%),radial-gradient(ellipse at 80% 75%,#a67ed133,transparent 40%),radial-gradient(ellipse at 90% 20%,#df705c22,transparent 30%);animation:guide-sel-soft-light 30s ease-in-out infinite alternate}
@keyframes guide-sel-soft-light{from{transform:translate3d(-2%,-2%,0) scale(.96)}to{transform:translate3d(5%,4%,0) scale(1.05)}}
.guide-sel-card--emotions .guide-sel-copy{position:relative;min-width:0;align-self:center}
.guide-sel-card--emotions .guide-sel-label{color:#c5ef91;font-size:15px;font-weight:400;letter-spacing:.04em;line-height:1.6}
.guide-sel-card--emotions h2{font-family:inherit;font-size:36px;font-weight:400;line-height:1.4;margin:8px 0 12px;color:#f4f2e9}
.guide-sel-card--emotions p{font-size:18px;line-height:1.8;color:#c2ccd4;margin:0;max-width:31em;text-wrap:pretty}
.guide-sel-card--emotions .guide-sel-action{display:block;margin-top:20px}
.guide-sel-card--emotions .guide-sel-cta{min-height:46px;gap:22px;padding:10px 20px;background:#c5ef91;color:#17262c;border:1px solid #c5ef91;border-radius:12px;font-size:18px;font-weight:400;line-height:1.4}
.guide-sel-card--emotions:hover{border-color:#c5ef9190;box-shadow:0 18px 45px #0b172b25}
.guide-sel-card--emotions:focus-visible{outline:3px solid #68923c;outline-offset:5px}
.guide-sel-cast{container-type:inline-size;--guide-sel-visible-size:min(150px,30cqw);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:4px;min-width:0}
.guide-sel-cast .guide-sel-pose{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--guide-sel-visible-size) + 18px) 24px;row-gap:16px;margin:0;text-align:center;min-width:0;isolation:isolate}
.guide-sel-pose::before{content:'';position:absolute;inset:20% -12% 4%;z-index:-1;background:radial-gradient(ellipse,#ae9bdf24,transparent 70%)}
.guide-sel-pose--anger::before{background:radial-gradient(ellipse,#e9a08024,transparent 70%)}
.guide-sel-pose--sadness::before{background:radial-gradient(ellipse,#8cbbe624,transparent 70%)}
/* Calibrate visible silhouette height and foot baseline; keep source artwork unchanged. */
.guide-sel-pose--worry{--pose-image-height:1.319444;--pose-bottom-space:.145833}
.guide-sel-pose--anger{--pose-image-height:1.371951;--pose-bottom-space:.166667}
.guide-sel-pose--sadness{--pose-image-height:1.453155;--pose-bottom-space:.179732}
.guide-sel-cast img{display:block;width:auto;max-width:none;height:calc(var(--guide-sel-visible-size)*var(--pose-image-height));justify-self:center;align-self:end;object-fit:contain;transform:translateY(calc(var(--guide-sel-visible-size)*var(--pose-bottom-space)));filter:drop-shadow(0 12px 16px #00000018)}
.guide-sel-cast figcaption{margin-top:0;color:#d9e0e5;font-size:16px;line-height:1.5}
@media(max-width:1000px){.guide-sel-card.guide-sel-card--emotions{grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);gap:20px;padding:28px}.guide-sel-card--emotions h2{font-size:32px}}
@media(max-width:760px){.guide-sel-card.guide-sel-card--emotions{grid-template-columns:1fr;gap:20px;min-height:0;padding:26px}.guide-sel-cast{max-width:440px;width:100%;margin:auto;gap:8px}.guide-sel-card--emotions .guide-sel-label{font-size:14px}.guide-sel-card--emotions h2{font-size:32px}.guide-sel-card--emotions p{font-size:18px}.guide-sel-card--emotions .guide-sel-action{margin-top:18px}}
@media(max-width:370px){.guide-sel-card.guide-sel-card--emotions{padding:22px 20px;gap:16px}.guide-sel-cast{gap:4px}.guide-sel-card--emotions .guide-sel-label{letter-spacing:0;font-size:13px}.guide-sel-cast figcaption{font-size:15px}}
@media(prefers-reduced-motion:reduce){.guide-sel-card--emotions::before{animation:none}.guide-sel-card.guide-sel-card--emotions{transition:none}}

/* MOBILE_TYPE_START: generated by scripts/generate-mobile-typography.py */
@media screen and (max-width: 640px) {
.guide-sel-card--emotions .guide-sel-label { font-size: max(16px, calc(15px * 1.06)); }
.guide-sel-card--emotions h2 { font-size: max(18px, calc(36px * 1.03)); }
.guide-sel-card--emotions p { font-size: max(18px, calc(18px * 1.06)); }
.guide-sel-card--emotions .guide-sel-cta { font-size: max(18px, calc(18px * 1.06)); }
.guide-sel-cast figcaption { font-size: max(16px, calc(16px * 1.06)); }
@media (max-width:1000px) {
.guide-sel-card--emotions h2 { font-size: max(18px, calc(32px * 1.03)); }
}
@media (max-width:760px) {
.guide-sel-card--emotions .guide-sel-label { font-size: max(16px, calc(14px * 1.06)); }
.guide-sel-card--emotions h2 { font-size: max(18px, calc(32px * 1.03)); }
.guide-sel-card--emotions p { font-size: max(18px, calc(18px * 1.06)); }
}
@media (max-width:370px) {
.guide-sel-card--emotions .guide-sel-label { font-size: max(16px, calc(13px * 1.06)); }
.guide-sel-cast figcaption { font-size: max(16px, calc(15px * 1.06)); }
}
}
/* MOBILE_TYPE_END */