vi4a

<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
.root{font-family:'Crimson Text',Georgia,serif;background:#0d0b08;border-radius:8px;overflow:hidden;height:620px;display:flex;flex-direction:column}
.hdr{background:#0f0d09;border-bottom:1px solid #3d2e14;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0}
.hdr-t{font-family:'Cinzel',serif;font-size:13px;color:#c8a96e;letter-spacing:.2em}
.phase-badge{font-family:'Cinzel',serif;font-size:11px;color:#7a6040;border:1px solid #3d2e14;padding:3px 14px;letter-spacing:.15em}
.hdr-r{font-family:'Cinzel',serif;font-size:11px;color:#5a4020}
.body{flex:1;display:grid;grid-template-columns:200px 1fr;overflow:hidden}