.character-pair-page { text-align: center; }
.pair-instruction { color: #7f906e; font-size: 12px; margin-top: -10px; }
.character-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 65px; max-width: 670px; margin: 44px auto 36px; }
.character-card { min-width: 0; display: flex; align-items: center; flex-direction: column; }
.character-number { color: #92a374; font: 11px Georgia, serif; margin-bottom: 14px; }
.character-card-link { display: block; width: 100%; }
.character-card-art { position: relative; display: grid; place-items: center; width: 100%; height: 300px; background: radial-gradient(ellipse at 50% 60%,#e5edce,#f3f5e775); border: 1px solid #becda4; border-radius: 85px 85px 12px 12px; overflow: hidden; }
.character-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; transition: transform .25s; }
.character-card-link:hover .character-card-art img { transform: scale(1.025); }
.character-card-art>span { font-size: 50px; color: #a1b782; }
.character-card h2 { font: 400 23px/1.6 var(--serif); margin: 19px 0 5px; overflow-wrap: anywhere; }
.character-other-name { font-size: 11px; color: #849570; margin: 0 0 10px; }
.character-card-intro { font-size: 12px; line-height: 2; color: #7d8d6d; overflow-wrap: anywhere; margin: 10px 0 13px; }
.character-view { font-size: 11px; color: #6b8553; }
.character-card .soft-button { display: inline-flex; align-items: center; margin-top: 20px; }
.character-pair-page .pair-footnote { margin: 0; font-size: 11px; line-height: 2; }
.character-topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 26px; margin-bottom: 30px; border-bottom: 1px solid #cbd5ba; }
.character-topbar .soft-button { display: inline-flex; align-items: center; }
.character-spread { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 45px; align-items: start; }
.character-visual { position: sticky; top: 28px; min-width: 0; text-align: center; }
.character-standing-art { width: 100%; min-height: 400px; display: grid; place-items: center; position: relative; }
.character-standing-art:before { content: ''; position: absolute; z-index: 0; inset: 8% 1%; background: radial-gradient(ellipse,#dfe9c36b,transparent 70%); pointer-events: none; }
.character-standing-art img { width: 100%; height: min(62vh,640px); min-height: 400px; object-fit: contain; position: relative; z-index: 1; }
.character-no-art { display: grid; place-items: center; width: 100%; height: 400px; border: 1px solid #ccd6b8; border-radius: 80px 80px 12px 12px; font-size: 70px; color: #adbf8f; }
.character-look-tabs { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 18px; }
.character-look { max-width: 115px; background: #f9faef; border: 1px solid #c9d5b3; border-radius: 8px; padding: 5px 8px 7px; color: #71875a; }
.character-look[aria-pressed=true] { background: #e5eccf; border-color: #8ca36d; box-shadow: 0 0 0 1px #aabd8f; }
.character-look img { width: 52px; height: 52px; object-fit: contain; margin: 0 auto 5px; display: block; }
.character-look span { display: block; font-size: 10px; overflow-wrap: anywhere; }
.character-original { display: inline-block; font-size: 10px; color: #83936f; margin-top: 17px; }
.character-original[hidden] { display: none; }
.character-information { min-width: 0; overflow-wrap: anywhere; padding-top: 4px; }
.character-information h1 { font-size: 38px; line-height: 1.5; margin: 17px 0 8px; letter-spacing: 2px; }
.character-secondary { font-size: 13px; color: #87956f; letter-spacing: 1px; margin: 0 0 22px; }
.character-quote { font: 400 20px/1.9 var(--serif); color: #6f8651; margin: 24px 0; padding-left: 18px; border-left: 2px solid #b9c89a; }
.character-summary { font-size: 13px; line-height: 2.1; color: #718365; margin-bottom: 25px; }
.character-section-nav { display: flex; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid #ccd5b9; padding-bottom: 16px; margin: 24px 0 26px; }
.character-section-nav:empty { display: none; }
.character-section-nav a { font-size: 11px; color: #83956e; }
.character-section { margin: 0 0 30px; scroll-margin-top: 25px; }
.character-section h2 { font: 500 16px/1.7 var(--serif); margin: 0 0 16px; color: #4e6845; }
.character-section h2>span { font: 10px Georgia,serif; color: #a2b18c; display: inline-block; width: 24px; }
.character-section>p { font-size: 13px; line-height: 2.2; margin: 0; color: #697e5b; }
.character-section .post-body { font-size: 13px; line-height: 2.2; }
.character-facts { margin: 0; }
.character-facts>div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 18px; padding: 9px 0; border-bottom: 1px solid #d7dec989; font-size: 12px; line-height: 1.9; }
.character-facts dt { color: #8b9a75; }
.character-facts dd { margin: 0; color: #536f45; }
.profile-draft-note { font-size: 11px; color: #879a6e; background: #eaf0da; padding: 8px 14px; border-radius: 7px; }
.profile-editor-intro { font-size: 12px; line-height: 2; margin: -8px 0 30px; color: #7b8b68; }
.profile-form-columns { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 35px; align-items: start; }
.profile-form h2 { font: 500 17px/1.8 var(--serif); margin: 0 0 8px; }
.profile-form label { display: flex; flex-direction: column; font-size: 12px; color: #7d8e69; gap: 9px; margin-bottom: 19px; min-width: 0; }
.profile-form input:not([type=hidden]), .profile-form textarea, .profile-form select { width: 100%; min-width: 0; border: 1px solid #c6d1af; border-radius: 8px; background: #fcfcf4; font: 400 14px/1.8 var(--serif); color: #435d3b; padding: 9px 12px; }
.profile-form textarea { resize: vertical; }
.profile-form select { font-size: 12px; }
.profile-form input:focus, .profile-form textarea:focus, .profile-form select:focus { outline: 2px solid #b3c790; outline-offset: 2px; }
.profile-main-preview { display: grid; place-items: center; height: 300px; border: 1px solid #d0d9bd; border-radius: 65px 65px 10px 10px; background: #eef3df80; margin: 20px 0 16px; overflow: hidden; }
.profile-main-preview img { max-width: 100%; width: 100%; height: 280px; object-fit: contain; }
.profile-main-preview img[hidden], .profile-main-preview span[hidden] { display: none; }
.profile-main-preview span { font-size: 45px; color: #a6b989; }
.profile-image-panel>#add-profile-images { width: 100%; margin-bottom: 24px; }
.profile-field-help { font-size: 11px; color: #8c9b79; line-height: 2; margin: -5px 0 20px; }
.profile-image-list { margin: 0 0 20px; }
.profile-image-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #d5ddc6; }
.profile-image-row img { width: 58px; height: 72px; object-fit: contain; flex-shrink: 0; border-radius: 5px; background: #eef1e1; }
.profile-image-row label { flex: 1; margin: 0; font-size: 10px; }
.profile-image-row input { font-size: 11px!important; padding: 5px 8px!important; }
.profile-body-heading { padding-top: 25px; border-top: 1px solid #d1dbc0; }
.profile-delete { border-top: 1px solid #d0d9bd; margin-top: 35px; padding-top: 20px; text-align: right; }
.profile-delete .text-button { font-size: 11px; color: #9a8a74; }
@media(max-width:1100px) {
 .character-spread { gap: 25px; }
 .character-cards { gap: 40px; }
 .character-standing-art img { min-height: 330px; }
 .profile-form-columns { gap: 22px; }
}
@media(max-width:680px) {
 .character-cards { gap: 20px; margin: 30px auto; }
 .character-card-art { height: 210px; border-radius: 60px 60px 10px 10px; }
 .character-card h2 { font-size: 19px; }
 .character-card-intro { font-size: 11px; }
 .character-card .soft-button { font-size: 11px; padding: 8px 12px; }
 .character-spread { grid-template-columns: 1fr; gap: 30px; }
 .character-visual { position: static; }
 .character-standing-art { min-height: 280px; }
 .character-standing-art img { height: 400px; min-height: 280px; }
 .character-information h1 { font-size: 32px; }
 .character-topbar { margin-bottom: 24px; padding-bottom: 20px; gap: 10px; }
 .character-topbar .soft-button { font-size: 11px; padding: 8px 10px; }
 .profile-form-columns { grid-template-columns: 1fr; gap: 26px; }
 .profile-main-preview { max-width: 330px; margin-left: auto; margin-right: auto; }
}
@media(max-width:420px) {
 .character-card-art { height: 185px; border-radius: 48px 48px 9px 9px; }
 .character-cards { gap: 14px; }
 .character-card h2 { font-size: 17px; }
 .character-card .soft-button { font-size: 10px; padding: 8px; }
 .character-card-intro { font-size: 10px; }
 .character-pair-page .pair-footnote { font-size: 10px; }
 .character-quote { font-size: 18px; }
}