.result-visual{position:relative;flex:0 0 320px}.character-frame{position:relative;width:300px;height:360px;border:1px solid rgba(184,255,69,.35);background:#0a1711;overflow:hidden}.character-frame:before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.1);z-index:2;pointer-events:none}.character-art,.poster-character{background-image:url("assets/fbti-character-atlas.png");background-size:400% 400%;background-repeat:no-repeat}.character-art{position:absolute;inset:0}.character-frame span{position:absolute;left:20px;bottom:18px;z-index:3;background:var(--green);color:#07110d;padding:7px 10px;font:900 9px monospace;letter-spacing:1px}.result-visual .percent-ring{position:absolute;width:112px;height:112px;right:-12px;bottom:-24px;background:var(--bg);z-index:4}.result-visual .percent-ring b{font-size:27px}.result-visual .percent-ring span{font-size:8px}.poster-center{min-height:208px;padding-right:122px}.poster-character{position:absolute;right:-12px;top:16px;width:126px;height:154px;border:1px solid rgba(184,255,69,.35);box-shadow:-12px 12px 0 rgba(184,255,69,.06)}.poster-center b{font-size:33px;letter-spacing:-2px}.poster-center h3{font-size:18px}.poster-center blockquote{max-height:44px;overflow:hidden}@media(max-width:760px){.result-hero{display:flex;flex-direction:column;align-items:flex-start}.result-visual{margin:24px auto 34px;flex-basis:auto}.character-frame{width:min(300px,82vw);height:min(360px,98vw)}.result-visual .percent-ring{right:-4px}.poster-center{padding-right:108px}.poster-character{width:110px;height:134px}}