.cast-art{height:260px}.cast-art svg.character-illustration{display:block;width:100%;height:100%;position:static;top:auto;transition:transform .25s ease}.cast-card:hover .cast-art svg.character-illustration{transform:translateY(-3px) scale(1.025)}.cast-art:after{font-size:8px;letter-spacing:1px;opacity:.65;top:12px;left:13px;pointer-events:none}.cast-code{background:#fff6e342;border-color:#34303955;font-size:8px;letter-spacing:1px;padding:4px 6px;z-index:1}.cast-description{min-height:86px}.cast-description strong{font-size:18px}.cast-card{border-color:#b9b0a147}.hero-art .character-illustration{display:block;width:100%;height:100%}.hero-card-front .hero-art{height:250px;margin:0}.hero-card-back .hero-art{height:215px;margin:6px 0 13px;opacity:1}.hero-card-back{padding-bottom:20px}.hero-card-back .card-series{letter-spacing:1px}.hero-card-number{color:#3430399c;top:50px}.detail-art{height:335px;overflow:hidden;border:1px solid #34303922}.detail-art .character-illustration{height:100%;width:100%;max-height:none}.portrait-credit{font-size:10px!important;line-height:1.75!important;color:#81766a;margin:12px 0 0!important;overflow-wrap:anywhere}.portrait-credit a{font-size:9px;text-decoration:underline;text-underline-offset:3px;color:#82706c}.result-visual .character-illustration{display:block;width:100%;height:300px;max-height:none}.result-visual .portrait-credit{font-size:9px!important;color:#514b4c;margin:12px 2px 3px!important}.result-visual .detail-tags{margin-top:0}.mini-art{overflow:hidden}.mini-art .character-illustration{width:100%;height:100%}.cast-source-note{font-size:10px;line-height:1.8;color:#8c8172;margin-top:20px}.character-detail-heading{margin-top:20px}
@media(max-width:1150px){.cast-art{height:230px}.hero-card-front .hero-art{height:210px}.hero-card-back .hero-art{height:180px}}
@media(max-width:820px){.cast-art{height:195px}.cast-description{min-height:82px}.cast-description strong{font-size:15px}.hero-card-front .hero-art{height:175px}.hero-card-back .hero-art{height:150px;margin-bottom:10px}.result-visual .character-illustration{height:245px}.cast-art:after{font-size:7px;left:10px;top:10px}.cast-code{right:9px;top:9px;font-size:7px;padding:3px 5px}}
@media(max-width:600px){.cast-art{height:210px}.cast-description strong{font-size:16px}.cast-description{min-height:82px}.hero-card-front .hero-art{height:195px}.hero-card-back .hero-art{height:162px}.detail-art{height:300px}.result-visual .character-illustration{height:220px}.cast-source-note{font-size:9px}.result-visual .portrait-credit{font-size:8px!important}.result-visual .portrait-credit a{font-size:8px}}
@media(max-width:360px){.cast-art{height:185px}.hero-card-front .hero-art{height:175px}.hero-card-back .hero-art{height:145px}}
@media print{.result-visual .character-illustration{height:170px;max-height:none}.result-visual .portrait-credit{font-size:8px!important}.portrait-credit a{display:none}}
/* Put the personality in the reading order, clear of faces and props. */
.cast-description{min-height:148px;padding:17px 18px 18px}.cast-description strong{min-height:26px}.cast-personality{display:flex;align-items:center;gap:10px;margin-top:11px}.cast-personality>span:first-child{font-size:10px;font-weight:500;color:#8b8274;letter-spacing:.5px}.cast-code{position:static;display:inline-flex;align-items:center;justify-content:center;font-family:Consolas,monospace;font-size:23px;font-weight:600;line-height:1;letter-spacing:1.5px;min-width:88px;min-height:36px;padding:7px 10px;border:1px solid #9b93842e;border-radius:999px;background:#ece9df;background:color-mix(in srgb,var(--character-color,#a9b99a) 16%,#faf7ef);color:#4d5048;box-shadow:none}.cast-description small{font-size:11px;margin-top:10px}.cast-arrow{bottom:20px}.personality-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;font:600 24px/1.1 Consolas,monospace;letter-spacing:1.5px;padding:8px 14px;border-radius:999px;background:#ece9df;background:color-mix(in srgb,var(--character-color,#a9b99a) 16%,#faf7ef);color:#4d5048;border:1px solid #9b93842e}.character-detail-heading{align-items:flex-start}.character-detail-heading h2{overflow-wrap:anywhere}.character-detail-heading .personality-badge{font-size:25px}.result-kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.result-kicker .personality-badge{font-size:27px}.result-card-top{align-items:center;gap:10px;margin-bottom:10px}.result-card-top .personality-badge{font-size:23px;padding:7px 10px}.card-topline{align-items:center}.card-topline .hero-personality{font-size:18px;font-weight:800;letter-spacing:1px;color:#343039}.hero-card-back>span:last-child{font-size:14px;font-weight:700;line-height:1.5}.cast-card:focus-visible .cast-code{outline:2px solid #7250a4;outline-offset:3px}
@media(max-width:820px){.cast-description{min-height:145px;padding:14px}.cast-code{font-size:21px;min-width:80px;min-height:34px}.cast-personality{gap:8px}.cast-personality>span:first-child{font-size:9px}.cast-description small{font-size:10px}.hero-card-back>span:last-child{font-size:12px}.card-topline .hero-personality{font-size:16px}}
@media(max-width:600px){.cast-description{min-height:157px;padding:13px 12px 15px}.cast-description strong{font-size:16px;min-height:48px}.cast-personality{margin-top:9px;gap:7px}.cast-code{font-size:21px;letter-spacing:1px;min-width:77px;padding:7px 8px}.cast-description small{font-size:10px;padding-right:12px}.character-detail-heading{gap:10px}.character-detail-heading .personality-badge{font-size:22px;padding:8px 10px}.result-kicker .personality-badge{font-size:25px}.result-card-top .personality-badge{font-size:21px}.hero-card-back>span:last-child{font-size:11px}.card-topline .hero-personality{font-size:15px}}
@media(max-width:360px){.cast-personality{gap:5px}.cast-personality>span:first-child{font-size:8px;letter-spacing:0}.cast-code{font-size:20px;min-width:70px;padding:7px}.cast-description{padding-left:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){.cast-card,.cast-art svg.character-illustration{transition:none}.cast-card:hover,.cast-card:hover .cast-art svg.character-illustration{transform:none}}
@media print{.personality-badge{background:#eeece2!important;color:#4d5048!important;print-color-adjust:exact}}