:root{color-scheme:dark;font:15px system-ui;background:#09111e;color:#e6edff}body{margin:0;padding:18px}header{display:flex;gap:24px;font-size:20px}#state{color:#7dd3fc}form{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}input,button,select{padding:10px;border:1px solid #334660;border-radius:9px;background:#17263c;color:inherit}label{display:grid;gap:4px}button{cursor:pointer}main{display:grid;grid-template-columns:minmax(250px,1fr) minmax(260px,.7fr);gap:18px}canvas{width:100%;aspect-ratio:1;background:#101f32;border-radius:16px}#panel{display:grid;align-content:start;gap:10px}.actor{padding:12px;border:1px solid #354865;border-radius:12px;display:flex;gap:12px;align-items:center}.hero{width:48px;height:48px;border-radius:50%}.skills{display:flex;gap:7px}.skill{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:#26334c;font-weight:bold}.skill img{width:100%;height:100%;border-radius:8px}.dim{filter:grayscale(1);opacity:.45}progress{width:100%;accent-color:#fb7185}p{color:#9bacc6;font-size:12px}@media(max-width:650px){main{grid-template-columns:1fr}body{padding:10px}input{max-width:90vw}}