.character-detail{align-items:start;gap:22px;display:grid}.character-detail>.character-ssr{display:contents}.character-aside{gap:4px;min-width:0;display:grid}.character-hero{text-align:center;justify-items:center;gap:2px;display:grid}.character-hero img{aspect-ratio:1;object-fit:cover;border:1px solid var(--border);background:var(--surface);width:100%;max-width:200px;height:auto;box-shadow:var(--shadow-lg);border-radius:24px}.character-hero h1{letter-spacing:-.03em;margin:16px 0 0;font-size:clamp(22px,5.5vw,28px)}.character-byline{color:var(--muted);margin:4px 0 0;font-size:14px}.character-byline a{color:inherit}.character-remix-note{text-align:center;font-size:13px}.character-stats{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:8px;font-size:13px;display:flex}.character-stats span{align-items:center;gap:4px;display:inline-flex}.character-stats .material-symbols-outlined{font-size:15px}.character-nsfw{background:var(--danger-soft);color:var(--danger);border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:650}.character-tags{flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 0;display:flex}.character-tags span,.character-tags a{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:4px 10px;font-size:12px;text-decoration:none}.character-tags a:hover,.character-tags a:focus-visible{color:var(--text);border-color:var(--border-strong)}.character-actions-detail{gap:8px;margin-top:18px;display:flex}.character-actions-detail>.btn{flex:1;min-width:0}.character-actions-detail .icon-btn{border-radius:var(--radius-sm);width:46px;height:46px}.character-actions-detail .favorite-btn.favorited{color:var(--accent);border-color:color-mix(in srgb, var(--accent) 45%, transparent)}.character-actions-detail .btn-secondary{flex-basis:100%}.character-ssr .character-actions-detail{flex-wrap:wrap}.character-body{gap:14px;min-width:0;display:grid}.character-section{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px 18px}.character-section-title{color:var(--faint);letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-size:11.5px;font-weight:700}.character-description{overflow-wrap:anywhere;line-height:1.6}.character-description>:first-child,.character-greeting-content>:first-child{margin-top:0}.character-description>:last-child,.character-greeting-content>:last-child{margin-bottom:0}.character-greeting-content{color:var(--muted);overflow-wrap:anywhere;line-height:1.6}.character-description img,.character-greeting-content img{border-radius:var(--radius-xs);max-width:100%;height:auto;margin:8px 0;display:block}.comments-section{gap:14px;display:grid}.comment-form{gap:8px;display:grid}.comment-form textarea{min-height:72px}.comment-form-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.comment-form-actions{gap:8px;display:flex}.comment-count{color:var(--faint);font-size:12px}.comment-list,.comment-replies{gap:14px;margin:0;padding:0;list-style:none;display:grid}.comment-replies{border-left:2px solid var(--border);margin:12px 0 0 18px;padding-left:14px}.comment{gap:10px;min-width:0;display:flex}.comment-main{flex:1;gap:4px;min-width:0;display:grid}.comment-head{color:var(--faint);flex-wrap:wrap;gap:4px 10px;font-size:12.5px;display:flex}.comment-head a{color:var(--text);font-weight:600;text-decoration:none}.comment-body{overflow-wrap:anywhere;white-space:pre-wrap;margin:0;line-height:1.55}.comment-deleted .comment-body{color:var(--faint);font-style:italic}.comment-actions{flex-wrap:wrap;gap:4px 14px;display:flex}.comment-actions button{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px 0;font-size:12.5px}.comment-actions button:hover,.comment-actions button:focus-visible{color:var(--text);text-decoration:underline}.comment-closed{margin:0}.character-related{width:100%;max-width:var(--wide-content-width);padding:0 max(16px, env(safe-area-inset-left)) 32px;margin:0 auto}.character-related .section-title{margin:8px 0 14px}.character-related>p{margin-top:16px}.character-related>p a{color:var(--accent)}@media (width>=760px){.character-detail{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:32px}.character-aside{top:calc(var(--nav-height) + 20px);position:sticky}.character-hero img{max-width:100%}}@media (width>=900px){.character-hero h1{font-size:25px}.character-actions-detail .icon-btn{width:40px;height:40px}.character-related{padding:0 28px 40px}}.character-detail>.empty-state,.character-detail>.loading-state{grid-column:1/-1}