main{position:relative}main>.actor{position:fixed;z-index:1;display:flex;&:before{content:"";position:absolute;width:100%;height:100%;left:0;top:0;opacity:.2;border-radius:12px;background-color:var(--surface-color)}.name{writing-mode:vertical-rl;text-orientation:sideways;border-left:1px solid var(--neutral-color);padding:1rem 0 1rem 3px}table{height:min-content;padding:.5em 2px .5em 0}td.key{text-align:right;text-wrap-mode:nowrap}td{width:50%}}#left{bottom:0;left:6px;align-items:flex-end;.name{rotate:180deg}}#right{top:var(--header-height);right:6px;flex-direction:row-reverse;align-items:flex-start}#body{width:80%;margin:0 auto;padding:2rlh 0;gap:20px;&,div{display:flex;flex-direction:column;>img{max-width:100%;height:auto;display:block}}div{gap:6px}>div{gap:12px}div[data-side=field],div:not([data-side])>p[data-side=field]{text-align:center}div[data-side=left],div:not([data-side])>p[data-side=left]{text-align:left;>p.skill:before{content:"\2500\2500";margin:0 .2em}>img{align-self:flex-start}}div[data-side=right],div:not([data-side])>p[data-side=right]{text-align:right;>p.skill:after{content:"\2500\2500";margin:0 .2em}>img{align-self:flex-end}}p:empty{display:none}p.turn{display:flex;justify-content:center;align-items:center;gap:.5em;&:before,&:after{content:"";height:0;border-top:1px solid var(--neutral-color);animation:line-grow .2s ease-out forwards}}p.skill{font-size:120%}div[data-side=left]>p{justify-content:left;animation:slide-in-left 20ms ease-out forwards}div[data-side=right]>p{justify-content:right;animation:slide-in-right 20ms ease-out forwards}.portrait{max-width:100%;height:auto}hr{margin:1rlh 0;border-top:1px solid var(--neutral-color)}}@keyframes slide-in-left{0%{opacity:0;translate:-10%}to{opacity:1;translate:0}}@keyframes slide-in-right{0%{opacity:0;translate:10%}to{opacity:1;translate:0}}@keyframes line-grow{0%{flex-grow:0}to{flex-grow:1}}