@layer interface {
 .flow-modal[data-view="character"] { width:min(940px,calc(100vw - 32px)); height:auto; max-height:92vh; }
 .character-profile { padding-top:18px; display:grid; gap:22px; }
 .profile-overview { display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; padding:18px; border:1px solid #655032; background:radial-gradient(ellipse at top right,#40321b66,transparent 70%),linear-gradient(125deg,#222219,#10130f); }
 .profile-portrait { position:relative; margin:0; min-height:230px; overflow:hidden; border:1px solid #9f7b3f; background:#0a0d0b; box-shadow:0 5px 20px #0008; }
 .profile-portrait img { display:block; width:100%; height:230px; object-fit:contain; }
 .profile-portrait figcaption { position:absolute; bottom:0; left:0; right:0; padding:7px 10px; text-align:center; background:linear-gradient(transparent,#080b08f5 35%); color:#dbc18d; font:.8rem var(--display); }
 .profile-portrait figcaption strong { font-size:1.2rem; margin-left:4px; }
 .profile-vitals { display:grid; align-content:center; gap:16px; }
 .profile-identity small { color:#aa8b54; font:.6rem var(--ui); letter-spacing:.2em; }
 .profile-identity h3 { margin:4px 0 0; color:#efd6a1; font:1.6rem var(--display); }
 .profile-resource > div:first-child { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:5px; color:#ddd1b8; font:.85rem var(--ui); }
 .profile-resource b { color:#f3e4c6; font-size:.95rem; font-variant-numeric:tabular-nums; }
 .profile-resource b small { color:#a49d8b; font-size:.8rem; font-weight:400; }
 .profile-resource .meter { height:10px; margin:0; border-color:#75603b; }
 .profile-attributes > header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
 .profile-attributes h3,.character-profile .current-effects h3 { margin:0; color:#ecd3a0; font:1.25rem var(--display); }
 .profile-points { padding:5px 10px; border:1px solid #514832; background:#191c15; color:#b8b29e; font:.75rem var(--ui); }
 .profile-points b { margin-right:4px; color:#e1cfaa; }
 .profile-points.has-points { border-color:#9e7a36; color:#f1d99d; background:#332b17; }
 .profile-attribute-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
 .profile-attribute-grid article { min-width:0; display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 8px; padding:14px; border:1px solid #5a4c30; background:linear-gradient(140deg,#27271c,#11150f); box-shadow:inset 0 1px #9d86511a; }
 .profile-attribute-grid article > span { grid-column:1 / -1; color:#c7bca1; font:.8rem var(--ui); }
 .profile-attribute-grid article > strong { color:#f3deb1; font:1.9rem var(--display); }
 .profile-attribute-grid .flow-button { padding:6px 9px; min-height:32px; font-size:.72rem; }
 .profile-attribute-grid button:disabled { opacity:.45; cursor:default; }
 .profile-reset { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid #4f432b; }
 .profile-reset h4 { margin:0; color:#c2b28f; font:.85rem var(--display); }
 .profile-reset p { margin:4px 0 0; color:#a6a28f; font:.75rem/1.5 var(--ui); max-width:440px; }
 .profile-reset .flow-button { padding:8px 12px; font-size:.75rem; }
 .character-profile .current-effects { padding:16px; border:1px solid #4f4c34; background:#141810; }
 .character-profile .current-effects > p { margin:8px 0 0; color:#a4ab95; font:.8rem var(--ui); }
 .character-profile .current-effects article { margin:12px 0 0; }
 @media(max-width:760px) {
  .profile-overview { grid-template-columns:120px minmax(0,1fr); gap:14px; padding:12px; }
  .profile-portrait,.profile-portrait img { min-height:200px; height:200px; }
  .profile-attribute-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 }
 @media(max-width:420px) {
  .profile-overview { grid-template-columns:1fr; }
  .profile-portrait { width:140px; justify-self:center; }
  .profile-attribute-grid article { padding:10px; }
 }
}